Ik heb hier een werkende code: http://jsfiddle.net/WVm5d/(mogelijk heb je om het resultatenvenster groter te maken om het uitlijningscentrumeffect te zien)
Vraag
De code werkt prima, maar ik hou niet van display: table;. Het is de enige manier waarop ik de wrap-class centreer kan maken. Ik denk dat het beter zou zijn als er een manier was om display: block;of display: inline-block;te gebruiken. Is het mogelijk om het centreerpunt op een andere manier op te lossen?
Een vast met toevoegen aan de container is geen optie voor mij.
Ik zal mijn code hier ook plakken als de JS Fiddle-link in de toekomst wordt verbroken:
body {
background: #bbb;
}
.wrap {
background: #aaa;
margin: 0 auto;
display: table;
overflow: hidden;
}
.sidebar {
width: 200px;
float: left;
background: #eee;
}
.container {
margin: 0 auto;
background: #ddd;
display: block;
float: left;
padding: 5px;
}
.box {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
margin: 5px;
float: left;
}
.box:nth-child(3n+1) {
clear: left;
}<div class="wrap">
<div class="sidebar">
Sidebar
</div>
<div class="container">
<div class="box">
Height1
</div>
<div class="box">
Height2<br />
Height2
</div>
<div class="box">
Height3<br />
Height3<br />
Height3
</div>
<div class="box">
Height1
</div>
<div class="box">
Height2<br />
Height2
</div>
<div class="box">
Height3<br />
Height3<br />
Height3
</div>
</div>
<div class="sidebar">
Sidebar
</div>
</div>Antwoord 1, autoriteit 100%
De geaccepteerde oplossing zou niet werken voor mij omdat ik een onderliggend element nodig heb met display: inline-blockom zowel horizontaal als verticaal gecentreerd te zijn binnen een ouder met een breedte van 100%.
Ik heb de eigenschappen justify-contenten align-itemsvan Flexbox gebruikt, waarmee je respectievelijk elementen horizontaal en verticaal kunt centreren. Door beide in te stellen centerop het bovenliggende element, zal het onderliggende element (of zelfs meerdere elementen!) perfect in het midden staan.
Deze oplossing vereist geen vaste breedte, wat voor mij ongeschikt zou zijn geweest omdat de tekst van mijn knop zal veranderen.
Hier is een CodePen-demoen een fragment van de relevante code hieronder:
.parent {
display: flex;
justify-content: center;
align-items: center;
}<div class="parent">
<a class="child" href="#0">Button</a>
</div>Antwoord 2, autoriteit 96%
Probeer dit eens. Ik heb text-align: centertoegevoegd aan de body en display:inline-blockom de tekst in te pakken, en vervolgens heb ik je display: table
verwijderd
body {
background: #bbb;
text-align: center;
}
.wrap {
background: #aaa;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
Antwoord 3, autoriteit 74%
Als je een <div>hebt met text-align:center;, dan wordt alle tekst erin gecentreerd ten opzichte van de breedte van dat containerelement . inline-block-elementen worden voor dit doel als tekst behandeld, dus ze worden ook gecentreerd.
Antwoord 4, autoriteit 12%
U kunt dit ook doen met positionering, ouder-div op relatief en child-div op absoluut.
.wrapper {
position: relative;
}
.childDiv {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Antwoord 5, autoriteit 7%
Hiermee wordt een inline-blokelement horizontaal gecentreerd zonder dat de bovenliggende stijlen hoeven te worden gewijzigd:
display: inline-block;
position: relative;
// Move the element to the right by 50% of the container's width
left: 50%;
// Calculates 50% of the element's width, and moves it by that
// amount across the X-axis to the left
transform: translateX(-50%);
Antwoord 6
U hoeft “display: table” niet te gebruiken. De reden dat uw marge: 0 automatische centreringspoging niet werkt, is omdat u geen breedte heeft opgegeven.
Dit werkt prima:
.wrap {
background: #aaa;
margin: 0 auto;
width: some width in pixels since it's the container;
}
U hoeft display: block niet op te geven, aangezien die div standaard block is. Je kunt waarschijnlijk ook de overloop kwijtraken: verborgen.
Antwoord 7
Ik heb zojuist 2 parameters gewijzigd:
.wrap {
display: block;
width:661px;
}Antwoord 8
Geweldig artikel, ik ontdekte dat wat voor mij het beste werkte, was om een % aan de maat toe te voegen
.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}
Antwoord 9
Gebruik gewoon:
line-height:50px
Vervang “50px” door dezelfde hoogte als uw div.