Warum wird eine Schaltfläche in einem flex
Container zentriert, indem margin : 0px auto;
verwendet wird, aber eine Schaltfläche in einem normalen Container platziert ist nicht?Schaltfläche wird nicht im Container auf Blockebene zentriert
auch, was kann ich den Knopf im normalen Behälter zum Zentrum zu tun (ich kann nicht meinen HTML ändern, so dass eine CSS-Lösung würde geschätzt.)
.flex-container {
display: flex;
background: yellow;
}
.normal-container {
background: green;
}
button {
margin: 0px auto;
}
<div class="flex-container">
<button>Button in flex</button>
</div>
<div class="normal-container">
<button>Button in normal</button>
</div>
jsFiddle Link: https://jsfiddle.net/r8h3d9wy/1/
Kann ich stattdessen in 'display: inline-block' oder' display: block' wechseln? – agdhruv
Sicher, wenn Sie wollen, aber abhängig von Ihrer Struktur, die andere Effekte haben könnte. –