How can I horizontally center a button element in a div element?
HtmlCssCenterText AlignmentText AlignHtml Problem Overview
I don't want to add CSS to my div element (e.g. <div style="text-align: center;">
).
I only want to add CSS code to the button element.
<div>
<button>Button</button>
</div>
How can I center the button horizontally in this case?
Html Solutions
Solution 1 - Html
button {
margin:0 auto;
display:block;
}
button {
margin: 0 auto;
display: block;
}
<div>
<button>Button</button>
</div>
Solution 2 - Html
Others have already mentioned the margin: 0 auto;
method, but if you wanted an explanation, the browser splits up the available space in whatever container your element is in.
Also important to point out is you'll probably need to give your
Solution 3 - Html
You need display: block; margin: auto;
on the <button>
.
jsFiddle