Jag tror att många av er som har haft att göra med layout har stött på behovet av att rikta in element vertikalt och känner till de svårigheter som uppstår när man riktar ett element mot mitten.
Ja, det finns en speciell vertikal justering-egenskap med flera värden i CSS för vertikal justering. Men i praktiken fungerar det inte alls som förväntat. Låt oss försöka reda ut det här.
Låt oss jämföra följande tillvägagångssätt. Justera med:
- bord,
- indrag,
- linje-höjd
- stretching,
- negativ marginal,
- omvandla
- pseudoelement
- flexbox.
Det finns två div-element, med ett av dem kapslat i det andra. Låt oss ge dem motsvarande klasser - yttre och inre.
Utmaningen är att rikta in det inre elementet med mitten av det yttre elementet.
Först, låt oss överväga fallet när dimensionerna på de externa och interna blocken känd. Låt oss lägga till regelvisningen: inline-block till det inre elementet och text-align: center och vertikal-align: mitt till det yttre elementet.
Kom ihåg att justering endast gäller för element som har ett inline- eller inline-block-visningsläge.
Låt oss ställa in storleken på blocken, samt bakgrundsfärger så att vi kan se deras gränser.
Yttre ( width: 200px; höjd: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner (display: inline-block; width: 100px; höjd: 100px; bakgrundsfärg : #fcc )
Efter att ha applicerat stilarna kommer vi att se att det inre blocket är riktat horisontellt, men inte vertikalt:
http://jsfiddle.net/c1bgfffq/
Varför hände detta? Saken är att egenskapen vertikal-align påverkar alignment själva elementet, inte dess innehåll(förutom när det tillämpas på tabellceller). Att applicera denna egenskap på det yttre elementet gav därför ingenting. Att applicera denna egenskap på ett inre element kommer dessutom inte att göra något, eftersom inline-block är inriktade vertikalt i förhållande till intilliggande block, och i vårt fall har vi ett inline-block.
Det finns flera tekniker för att lösa detta problem. Nedan kommer vi att titta närmare på var och en av dem.
Justering med hjälp av en tabell
Den första lösningen som kommer att tänka på är att ersätta det yttre blocket med ett bord med en cell. I det här fallet kommer justeringen att tillämpas på innehållet i cellen, det vill säga på det inre blocket.
http://jsfiddle.net/c1bgfffq/1/
Uppenbart minus detta beslut– ur semantisk synvinkel är det felaktigt att använda tabeller för justering. Den andra nackdelen är att skapa en tabell kräver att man lägger till ytterligare ett element runt det yttre blocket.
Det första minuset kan delvis tas bort genom att ersätta tabell- och td-taggarna med div och ställa in tabellvisningsläget i CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Det yttre blocket kommer dock fortfarande att förbli ett bord med alla följder.
Justering med indrag
Om höjderna på de inre och yttre blocken är kända, kan inriktningen ställas in med de vertikala indragen på det inre blocket med formeln: (H yttre – H inre) / 2.Yttre ( höjd: 200px; ) .inner (höjd: 100px; marginal: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/
Nackdelen med lösningen är att den endast är tillämpbar i ett begränsat antal fall när höjderna på båda blocken är kända.
Uppriktning med linjehöjd
Om du vet att det inre blocket inte bör uppta mer än en textrad, kan du använda egenskapen line-height och ställa in den lika med höjden på det yttre blocket. Eftersom innehållet i det inre blocket inte ska lindas till den andra raden, rekommenderas det att även lägga till blanktecken: nowrap och overflow: dolda regler.Yttre ( höjd: 200 px; linjehöjd: 200 px; ) .inner ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/
Den här tekniken kan också användas för att justera flerradstext om du omdefinierar linjehöjdsvärdet för det inre blocket och även lägger till displayen: inline-block och vertical-align: middle-regler.
Yttre ( höjd: 200 px; linjehöjd: 200 px; ) .inner ( linjehöjd: normal; display: inline-block; vertikaljustering: mitten; )
http://jsfiddle.net/c1bgfffq/15/
Minus denna metodär att höjden på det yttre blocket måste vara känd.
Justering med "stretch"
Denna metod kan användas när höjden på det externa blocket är okänd, men höjden på det inre blocket är känd.För att göra detta behöver du:
- ställ in relativ positionering till det externa blocket, och absolut positionering till det inre blocket;
- lägg till reglerna överst: 0 och botten: 0 till det inre blocket, som ett resultat av vilket det kommer att sträcka sig till hela höjden av det yttre blocket;
- ställ in den vertikala stoppningen av det inre blocket på auto.
http://jsfiddle.net/c1bgfffq/4/
Tanken bakom denna teknik är att inställning av en höjd för ett utsträckt och absolut placerat block gör att webbläsaren beräknar den vertikala utfyllnaden i ett lika stort förhållande om den är inställd på auto.
Uppriktning med negativ marginal-topp
Denna metod har blivit allmänt känd och används mycket ofta. Liksom den föregående används den när höjden på det yttre blocket är okänd, men höjden på det inre är känd.Du måste ge det externa blocket relativ positionering och det interna blocket absolut positionering. Sedan måste du flytta ned det inre blocket med halva höjden av det yttre blockets topp: 50% och höja det med halva sin egen höjd marginal-top: -H inner / 2.
Yttre (position: relativ; ) .inner (höjd: 100px; position: absolut; topp: 50%; marginal-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Nackdelen med denna metod är att höjden på inomhusenheten måste vara känd.
Justering med transform
Denna metod liknar den tidigare, men den kan användas när höjden på inomhusenheten är okänd. I det här fallet, istället för att ställa in en negativ pixelutfyllnad, kan du använda egenskapen transform och flytta det inre blocket uppåt med hjälp av translateY-funktionen och ett värde på -50 % .Yttre ( position: relativ; ) .inner ( position: absolut; topp: 50%; transform: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Varför var det omöjligt att sätta värdet i procent i den tidigare metoden? Eftersom procentuella marginalvärden beräknas i förhållande till det överordnade elementet, skulle ett värde på 50 % vara halva höjden av den yttre lådan, och vi skulle behöva höja den inre lådan till halva sin egen höjd. Transformfastigheten är perfekt för detta.
Nackdelen med denna metod är att den inte kan användas om inomhusenheten har absolut positionering.
Uppriktning med Flexbox
Det mest moderna sättet för vertikal justering är att använda Flexible Box Layout (populärt känt som Flexbox). Denna modul låter dig flexibelt styra placeringen av element på sidan och ordna dem nästan var som helst. Centrering för Flexbox är en mycket enkel uppgift.Det yttre blocket måste ställas in för att visa: flex och det inre blocket till marginal: auto . Och det är allt! Vackert, eller hur?
Yttre (skärm: flex; bredd: 200px; höjd: 200px; ) .inner (bredd: 100px; marginal: auto;)
http://jsfiddle.net/c1bgfffq/14/
Nackdelen med denna metod är att Flexbox endast stöds av moderna webbläsare.
Vilken metod ska jag välja?
Du måste utgå från problemformuleringen:- För att justera text vertikalt är det bättre att använda vertikala indrag eller egenskapen line-height.
- För absolut placerade element med en känd höjd (till exempel ikoner) är metoden med en negativ marginal-top-egenskap idealisk.
- För mer komplexa fall När höjden på blocket är okänd måste du använda ett pseudoelement eller transformegenskapen.
- Tja, om du har sån tur att du inte behöver stödja äldre versioner av IE-webbläsaren, så är det naturligtvis bättre att använda Flexbox.
Taggar: Lägg till taggar
Layout och centrering av webbsidor är en kreativ strävan och orsakar ofta svårigheter för nybörjare. Så låt oss se hur man gör det. Låt oss säga att vi vill skapa en sida med följande struktur:
Vår sida består av fyra block: sidhuvud, meny, innehåll och sidfot. För att centrera sidan placerar vi dessa fyra block i ett huvudblock:
Sidhuvud
Innehåll
Nederst på sidan
Med hjälp av denna struktur som ett exempel kommer vi att överväga flera alternativ.
Layout och centrering av en gummiplats
När man lägger ut en gummiplats är den huvudsakliga måttenheten som används -%, eftersom platsen ska sträcka sig över hela bredden och uppta allt ledigt utrymme.
Därför kommer bredden på "sidhuvud" och "sidfot"-blocken att vara 100 % av skärmens bredd. Låt bredden på "meny"-blocket vara 30%, och "content"-blocket ska vara placerat bredvid "meny"-blocket, dvs. den måste ha en vänstermarginal (marginal-vänster) med en bredd som är lika med bredden på "meny"-blocket, d.v.s. 30 %.
För att få "meny"- och "innehålls"-blocken att sitta bredvid varandra, låt oss göra "meny"-blocket flytande och trycka det till vänster kant. Vi kommer också att ställa in bakgrundsfärgerna för våra block. Låt oss nu skriva allt detta i stilmallen (på style.css-sidan)
#header( background:#3e4982; width:100%; height:110px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu( bakgrund:#6173cb; float :left; width:300px; text-align:center; #content(background:#ffffff; #3e4982;
Höjden på blocken ställdes in villkorligt så att resultatet blev synligt. Titta på vår sida i din webbläsare:
Om du ändrar storleken på webbläsarfönstret kommer bredden på alla block att ändras. Detta är inte alltid bekvämt, eftersom... När menyblocket är utsträckt visas ett tomt utrymme. Därför är bredden på "meny"-blocket ofta fast, så låt oss göra detsamma. För att göra detta, ersätt värdena för motsvarande egenskaper i stilmallen:
... #menu( bakgrund:#6173cb; float:vänster; bredd:200px; höjd:300px; ) #content( bakgrund:#ffffff; margin-left:200px; höjd:300px; ) ...
Nu sträcker sig vår sida mer naturligt. Med flytande layout upptar sidor hela skärmens bredd, så sidjustering krävs inte.
Men om du vill kan du få din sida att ha lika utfyllnad till vänster och höger på skärmen. För att göra detta måste du lägga till en stil till "huvudblocket", som är en behållare för alla andra block:
Nu ser vår sida ut så här:
Layout och centrering av platsen, fast bredd
I det här fallet måste vi ställa in fasta storlekar för våra block:
#main( width:800px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center; color:#FFFFFF; font-size:24px; padding-top:40px; ) #menu ( background:#6173cb; float:left; width:200px; height:300px; text-align:center; color:#FFFFFF; font-size:18px; padding-top:10px; ) #content( background:#ffffff; margin-left:200px; höjd:300px storlek:14px; padding-top:10px;
Nu är vår sida nedtryckt till vänster kant av skärmen.
I det här fallet kan centrering av webbplatssidor göras enligt följande. Låt oss komma ihåg att vår sida har en "body"-tagg, som även kan ges en bredd och lite utfyllnad.
Låt oss göra så här: ge "body"-taggen en bredd på 800 pixlar (som "huvudblocket") och en utfyllnad vänster på 50%. Då kommer hela innehållet i "huvudblocket" att visas på höger sida av skärmen (dvs från mitten till höger):
För att vårt "huvudblock" ska placeras i mitten av skärmen måste dess mitt sammanfalla med mitten av "body"-taggen. Dessa. du måste flytta "huvudblocket" till vänster med hälften av dess storlek. Bredden på "huvud"-blocket är 800 pixlar, vilket betyder att du måste ställa in egenskapen "margin-left:-400px" till det. Ja, den här egenskapen kan ha negativa värden, då minskas den vänstra marginalen (dvs. flyttas till vänster). Och det är precis vad vi behöver.
Stilmallen ser nu ut så här:
body( width:800px; padding-left:50%; ) #main( width:800px; margin-left:-400px; ) #header( background:#3e4982; width:800px; height:150px; text-align:center ; color:#FFFFFF; font-size:24px; padding-top:40px; float:left; höjd:300px; text-align:center; font-size:18px; padding-top:10px; width:800px;text-align:center;font-size:14px;
Och vår sida i webbläsaren ligger exakt i mitten:
Vi tittade på två alternativ för att centrera webbplatssidor i själva verket, de är inte dogmer. Du kan experimentera och komma på din egen version, kolla bara hur det fungerar i olika webbläsare. Tyvärr kan det som visas bra i FireFox eller Opera visas helt obegripligt i IE och vice versa. Och vi måste komma ihåg detta.
Lycka till i ditt kreativa uppdrag!
När man lägger ut en sida är det ofta nödvändigt att justera CSS-center-way: centrera till exempel huvudblocket. Det finns flera alternativ för att lösa detta problem, som vart och ett förr eller senare måste användas av vilken layoutdesigner som helst.
Centrera textjustering
Ofta, för dekorativa ändamål, är det nödvändigt att ställa in textjustering till mitten i det här fallet kan du minska layouttiden. Tidigare gjordes detta med HTML-attribut, men nu kräver standarden textjustering med hjälp av stilmallar. Till skillnad från block, för vilka du behöver ändra marginalerna, i CSS-justering Centrering av texten görs med en rad:
- text-align:center;
Denna egendom ärvs och förs vidare från föräldern till alla ättlingar. Påverkar inte bara texten, utan även andra element. För att göra detta måste de vara inline (till exempel span) eller inline-block (alla block som har egenskapen display: block). Det senare alternativet låter dig också ändra elementets bredd och höjd och justera indragen mer flexibelt.
Ofta på sidor tilldelas align till själva taggen. Detta ogiltigförklarar omedelbart koden, eftersom W3C har utfasat align-attributet. Att använda det på en sida rekommenderas inte.
Justera ett block mot mitten
Om du behöver centrera en div kan CSS erbjuda ganska bekvämt sätt: använd yttre marginaler. Indrag kan ställas in för både blockelement och inline-blockelement. Egenskapsvärdet ska vara 0 (vertikal utfyllnad) och auto (automatisk horisontell utfyllnad):
- margin:0 auto;
Nu anses detta alternativ som absolut giltigt. Genom att använda extern utfyllnad kan du också ställa in bilden så att den centreras: det låter dig lösa många problem relaterade till placeringen av ett element på sidan.
Rikta ett block åt vänster eller höger
Ibland krävs inte CSS-centerjustering, men du måste placera två block sida vid sida: en på vänsterkanten, den andra till höger. För detta ändamål finns det en flytegenskap som kan ha ett av tre värden: vänster, höger eller inget. Låt oss säga att du har två block som måste placeras sida vid sida. Då blir koden så här:
- .left (float:left;)
- .right(float:right)
Om det också finns ett tredje block, som ska placeras under de två första blocken (till exempel en sidfot), måste det ges den tydliga egenskapen:
- .left (float:left;)
- .right(float:right)
- sidfot (tydlig:båda)
Faktum är att block med klasserna vänster och höger faller ur det allmänna flödet, det vill säga alla andra element ignorerar själva existensen av justerade element. Egenskapen clear:both tillåter sidfoten eller något annat block att se element som har fallit ur flödet och förbjuder flytning till både vänster och höger. Därför, i vårt exempel, kommer sidfoten att flyttas nedåt.
Vertikal inriktning
Det finns tillfällen då det inte räcker med att ställa in centrumjusteringen med CSS-metoder, du behöver också ändra den vertikala positionen för det underordnade blocket. Alla inline- eller inline-blockelement kan kapslas i den övre eller nedre kanten, i mitten av ett överordnat element eller på valfri plats. Oftast måste blocket justeras mot mitten för detta används attributet vertikal-align. Låt oss säga att det finns två block, ett kapslat inuti det andra. I detta fall är det inre blocket ett inline-blockelement (display: inline-block). Du måste justera det underordnade blocket vertikalt:
- top alignment - .child(vertical-align:top);
- center alignment - .child(vertical-align:middle);
- bottenjustering - .child(vertical-align:bottom);
På blockelement varken textjustering eller vertikaljustering har någon effekt.
Möjliga problem med inriktade block
Ibland kan centrering av en div med CSS orsaka lite problem. Till exempel, när du använder float: låt oss säga att det finns tre block: .first, .second och .third. Det andra och tredje blocket ligger i det första. Elementet med klass två är vänsterjusterat och det sista blocket är högerjusterat. Efter att ha planat ut föll båda ur flödet. Om det överordnade elementet inte har en höjdinställning (till exempel 30em), kommer det inte längre att sträcka sig till höjden av sina underordnade block. För att undvika detta fel, använd en "spacer" - ett speciellt block som ser .second och .third. CSS-kod:
- .second(float:vänster)
- .third(float:right)
- .clearfix(höjd:0; rensa: båda;)
Pseudo-klassen:efter används ofta, vilket också låter dig återställa blocken till deras plats genom att skapa en pseudo-spacer (i exemplet ligger en div med containerklassen inside.first och innehåller.left and.right) :
- .left(float:vänster)
- .right(float:right)
- .container:after(content:""; display:table; clear:both;)
Ovanstående alternativ är de vanligaste, även om det finns flera varianter. Du kan alltid hitta det enklaste och bekvämaste sättet att skapa en pseudo-spacer genom att experimentera.
Ett annat problem som layoutdesigners ofta stöter på är anpassningen av inline-blockelement. Ett mellanslag läggs automatiskt till efter var och en av dem. Margin-egenskapen, som är inställd på en negativ indrag, hjälper till att hantera detta. Det finns andra metoder som används mycket mindre ofta: till exempel nollställning I det här fallet skrivs font-size: 0 i egenskaperna för det överordnade elementet. Om det finns text inuti block, är den erforderliga teckenstorleken redan returnerad i egenskaperna för inline-blockelement. Till exempel font-size:1em. Denna metod är inte alltid bekväm, så alternativet med externa indrag används mycket oftare.
Justering av block låter dig skapa vackra och funktionella sidor: detta inkluderar layouten för den övergripande layouten, arrangemanget av produkter i onlinebutiker och fotografier på en visitkortswebbplats.
Hej! Låt oss fortsätta att bemästra grunderna HTML-språk. Låt oss se vad du behöver skriva för att anpassa texten till mitten, bredden eller kanterna.
För att komma igång, låt oss titta på hur man centrerar text i tre på olika sätt. De två sista är länkade direkt till stilmallen. Det kan vara en CSS-fil som ansluter till sajtens sidor och definierar deras utseende.
Metod 1 - direkt arbete med HTML
Det är faktiskt ganska enkelt. Se exempel nedan.
Rikta in stycket i mitten.
Om du behöver flytta textfragment Annars anger vi följande värden istället för parametern "center":
- justera – anpassa texten till sidans bredd;
- höger - på höger kant;
- vänster - till vänster.
Analogt kan du flytta innehållet som finns i rubrikerna (h1, h2) och behållaren (div).
Metod 2 och 3 - använda stilar
Designen som presenteras ovan kan förvandlas något. Effekten blir densamma. För att göra detta måste du skriva koden nedan.
Textblock.
I det här formuläret skrivs koden direkt in i HTML-koden för att centrera textinnehållet.
Det finns ett annat alternativt sätt att uppnå resultat. Du måste göra ett par steg.
Steg 1. Skriv i huvudkoden
Textmaterial.
Steg 2. Ange följande kod i den medföljande CSS-filen:
Rovno (text-align:center;)
Jag noterar att ordet "rovno" bara är namnet på en klass som kan kallas annorlunda. Detta överlåts till programmerarens gottfinnande.
I analogi med HTML kan du enkelt göra text centrerad, justerad och justerad till höger eller vänster kant på sidan. Som du kan se finns det mycket mer än ett alternativ för att uppnå ditt mål.
Bara några frågor:
- Gör du ett informationsprojekt utan vinstsyfte?
- Vill du att din webbplats ska fungera bra? sökmotorer?
- Vill du tjäna pengar online?
Om alla svar är positiva, titta bara på ett integrerat tillvägagångssätt för webbutveckling. Informationen kommer att vara särskilt användbar om han arbetar för CMS WordPress.
Jag vill påpeka att dina egna webbsidor bara är ett av många alternativ för att generera passiva eller aktiva inkomster på Internet. Min blogg är tillägnad ekonomiska möjligheter online.
Har du någon gång arbetat inom området trafikarbitrage, copywriting och andra verksamhetsområden som ger huvud- eller ytterligare inkomst under fjärrsamarbete? Du kan lära dig om detta och mycket mer just nu på sidorna i min blogg.
Jag kommer att publicera en hel del fler framöver användbar information. Håll kontakten. Om du vill kan du prenumerera på Workip-uppdateringar via e-post. Prenumerationsformuläret finns nedan.
Dagens artikel syftar till att visa dig hur du centrerar en div, både horisontellt och vertikalt, med hjälp av några CSS-trick. Vi kommer också att berätta hur du centrerar över hela sidan eller i ett enskilt div-element.
Centrera enkelt ett DIV-element på sidan
Denna metod kommer att fungera perfekt i alla webbläsare.
CSS
Center-div (marginal: 0 auto; bredd: 100px; )
Exempel
Värdet auto i egenskapen margin ställer in vänster och höger marginal till hela det tillgängliga utrymmet på sidan. Det viktiga att komma ihåg här är att det centrerade div-elementet måste ha ett breddvärde.
Centrera en DIV inuti ett DIV-element på gammaldags sätt
Denna center alignment div-metod kommer att fungera i alla webbläsare.
CSS
Yttre-div (utfyllnad: 30px; ) .inner-div (marginal: 0 auto; bredd: 100px; )
HTML
Exempel
Den yttre div kan placeras på vilket sätt du vill, men den inre div måste ha en specificerad bredd ( bredd).
Centrera en DIV inuti ett DIV-element med inline-block
I den här metoden att centrera en div inom en div är det inte nödvändigt att specificera bredden på det inre elementet. Det kommer att fungera i alla moderna webbläsare, inklusive IE8.
CSS
Outer-div ( utfyllnad: 30px; text-align: center; ) .inner-div ( display: inline-block; utfyllnad: 50 px; )
HTML
Exempel
Egenskapen text-align fungerar bara på inline-element. Inline-blockvärdet tillåter att den inre div visas som ett inline-element och även som ett block ( inline-block). Egenskapen text-align på det yttre div-elementet gör att vi kan centrera den inre div.
Centrera en DIV inuti ett DIV-element horisontellt och vertikalt
Här marginal: auto används för att centrera div i mitten av sidan. Exemplet kommer att fungera i alla moderna webbläsare.
CSS
Outer-div ( stoppning: 30px; ) .inner-div ( marginal: auto; bredd: 100px; höjd: 100px; )
HTML
Exempel
Det inre div-elementet måste ha en specificerad bredd ( bredd) och höjd ( höjd). Metoden fungerar inte om det yttre div-elementet har en fast höjd.
Centrera DIV längst ner på sidan
Här marginal: auto används för att centrera div vertikalt och absolut positionering används för det yttre elementet. Metoden kommer att fungera i alla moderna webbläsare.
CSS
Yttre-div (position: absolut; botten: 30px; bredd: 100%; ) .inner-div (marginal: 0 auto; bredd: 100px; höjd: 100px; bakgrundsfärg: #ccc; )
HTML
Exempel
Den inre div måste ha en bredduppsättning. Utrymmet längst ner på sidan justeras med hjälp av den nedre egenskapen för den yttre div. Du kan också centrera en div högst upp på sidan genom att ersätta den nedersta egenskapen med den översta egenskapen.
Centrera DIV på sidan vertikalt och horisontellt
Här, för att centrera div, använder vi återigen marginal: auto och absolut positionering av den yttre div. Metoden kommer att fungera i alla moderna webbläsare.
CSS
Center-div (position: absolut; marginal: auto; topp: 0; höger: 0; nedre: 0; vänster: 0; bredd: 100px; höjd: 100px; )
Exempel
div-elementet måste ha en bredduppsättning ( bredd) och höjd ( höjd).
Att göra adaptiv centrering av ett DIV-element på sidan
Här för div inriktning I mitten, med hjälp av CSS, gör vi bredden på div-elementet adaptiv så att den reagerar på förändringar i fönsterstorlek. Denna metod fungerar i alla webbläsare.
CSS
Center-div (marginal: 0 auto; maxbredd: 700px;)
Exempel
Ett centrerat div-element måste ha sin max-width-egenskap inställd.
Centrera en DIV inuti ett element med hjälp av de inre blockegenskaperna
Det inre div-elementet här är responsivt. Den här metoden att centrera en div inuti en div fungerar i alla webbläsare.
CSS
Yttre-div (utfyllnad: 30px; ) .inner-div (marginal: 0 auto; maxbredd: 700px; )
HTML
Exempel
Den inre div måste ha sin max-width-egenskap inställd.
Centrera två responsiva divs bredvid varandra
Här har vi två responsiva div-element sida vid sida. Denna metod för att placera en div i mitten av skärmen fungerar i alla moderna webbläsare.
CSS
Container ( text-align: center; ) .left-div ( display: inline-block; max-width: 300px; vertical-align: top; ) .right-div ( display: inline-block; max-width: 150px; ) skärm och (maxbredd: 600px) ( .left-div, .right-div (vänster maxbredd: 100%; ) )
HTML
Exempel
Här har vi flera element med inline-block-egenskapen applicerad, placerad inuti en centrerad behållare. Det här exemplet använder också CSS-mediefrågor; det vill säga, om skärmstorleken är mindre än 600 pixlar, är egenskapen max-width för både vänster och höger div inställd på 100 %.
DIV-element centrerat med Flexbox
Här centrerar vi CSS div med Flexbox. Det är avsett att underlätta designutvecklingsprocessen användargränssnitt. Den här modulen stöds av Chrome 38+, IE11, Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ och Android webbläsare 40+ .
CSS
Container ( display: flex; align-items: center; justify-content: center; height: 100vh; ) .item ( bakgrundsfärg: #f3f2ef; border-radius: 3px; bredd: 200px; höjd: 100px; )
