Saker sitter vanligtvis i mitten av webbplatser, eller hur? Och att s\u00e4tta saker framf\u00f6r och i mitten \u00e4r det b\u00e4sta s\u00e4ttet att locka uppm\u00e4rksamhet, s\u00e5 m\u00e4nniskor f\u00f6rs\u00f6ker logiskt nog g\u00f6ra det f\u00f6r det mesta. S\u00e5 att s\u00e4tta element i mitten borde vara det enklaste, mest optimerade att g\u00f6ra i webbutveckling, eller hur? <\/p>\n\n
Eller hur?<\/p>\n\n
FEL.<\/p>\n\n
Det finns s\u00e5 m\u00e5nga s\u00e4tt att g\u00f6ra det p\u00e5, s\u00e5 m\u00e5nga alternativ och \u00e4nd\u00e5, p\u00e5 n\u00e5got s\u00e4tt, genom n\u00e5gon f\u00f6rbannelse, fungerar det fortfarande inte. Det \u00e4r affischnamnet f\u00f6r CSS-klagom\u00e5l, och av goda sk\u00e4l. Timmar och timmar av s\u00f6kning ”hur man centrerar saker i CSS”, ”hur man centrerar en div”, ”hur man centrerar en div i mitten av sidan”, ”hur man centrerar en text i html”, ”centrera div horisontellt och vertikalt” och listan kan forts\u00e4tta. <\/p>\n\n
Ingenting ska n\u00e5gonsin vara s\u00e5 h\u00e4r komplicerat.<\/p>\n\n
Kanske \u00e4r det s\u00e5 h\u00e4r p\u00e5 grund av de olika och ofta f\u00f6rvirrande metoder (vissa b\u00e4ttre, andra s\u00e4mre) som finns \u00f6verallt p\u00e5 internet. Och kanske beh\u00f6ver m\u00e4nniskor lite v\u00e4gledning n\u00e4r det g\u00e4ller det h\u00e4r \u00e4mnet. <\/p>\n\n
S\u00e5 h\u00e4r \u00e4r de, de b\u00e4sta metoderna f\u00f6r att centrera saker i CSS.<\/p>\n\n
<\/p>\n\n
1. Den grundl\u00e4ggande l\u00f6sningen. Den h\u00e4r l\u00f6sningen fungerar f\u00f6r inline-, inline-block-, inline-table- och inline-flex-element. <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 2. F\u00f6r centreringsblock<\/strong><\/p>\n\n <\/p>\n\n Eller<\/p>\n\n <\/p>\n\n <\/p>\n\n 3. N\u00e4r det g\u00e4ller text \u00e4r radh\u00f6jden ett bra knep att t\u00e4nka p\u00e5 f\u00f6r centrering. Detta fungerar b\u00e4st f\u00f6r enradig text. H\u00e5ll radh\u00f6jden p\u00e5 samma niv\u00e5 som beh\u00e5llarens h\u00f6jd. Precis s\u00e5 h\u00e4r: <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n Men om det \u00e4r flera rader, anv\u00e4nd bara:<\/p>\n\n <\/p>\n\n <\/p>\n\n 4. Att centrera bilder \u00e4r lite knepigare, s\u00e5 det finns flera l\u00f6sningar. Den f\u00f6rsta \u00e4r <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 5. Den h\u00e4r \u00e4r ocks\u00e5 bra f\u00f6r bilder<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 6. Lite mer komplicerat, men \u00e4nd\u00e5 bra f\u00f6r modala formuleringar.<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 7. Centrering g\u00e5r ocks\u00e5 vertikalt, inte bara horisontellt. Det \u00e4r h\u00e4r vi verkligen kan se en m\u00e4ngd olika alternativ och d\u00e4r r\u00e4ddaren som kallas flexdisplay kommer in i bilden. <\/p>\n\n <\/p>\n\n Men! T\u00e4nk p\u00e5 att du m\u00e5ste st\u00e4lla in flexriktningen. S\u00e5 anv\u00e4nd antingen <\/p>\n\n <\/p>\n\n F\u00f6r horisontell inriktning ELLER<\/p>\n\n <\/p>\n\n F\u00f6r vertikal justering<\/p>\n\n <\/p>\n\n 8. Fortfarande p\u00e5 temat att anv\u00e4nda flex kan vi ocks\u00e5 anv\u00e4nda kombinationer som<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 9. Naturligtvis kan position absolute hj\u00e4lpa dig att centrera saker b\u00e5de horisontellt och vertikalt<\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 10. En av de mer komplicerade l\u00f6sningarna \u00e4r att visa elementet som en tabell. Det fungerar fortfarande som en dr\u00f6m, s\u00e5 d\u00f6m inte ut det f\u00f6rr\u00e4n du har provat det. <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n 11. Vill du anv\u00e4nda rutn\u00e4tet? D\u00e5 blir det s\u00e5 mycket enklare. Du beh\u00f6ver bara en wrapper med <\/strong><\/p>\n\n <\/p>\n\n <\/p>\n\n Och l\u00e4gg sedan till detta i ditt element<\/p>\n\n <\/p>\n\n <\/p>\n\n Har vi missat n\u00e5gon? Eller har du andra l\u00f6sningar som inte finns med p\u00e5 listan? <\/strong><\/p>\n\n <\/p>\n\np { text-align: center }<\/code><\/p>\n\np {p {p {p {img {img {section {div {flex-direction:row;<\/code><\/p>\n\nflex-direction:column;<\/code><\/p>\n\ndiv {div {div {body, html {div {