I'm trying to center inner elements of a <button>
-tag with flexbox's justify-content: center
. But Safari does not center them. I can apply the same style to any other tags and it works as intended (see the <p>
-tag). Only the button is left-aligned.
Try Firefox or Chrome and you can see the difference.
Is there any user agent style I have to overwrite? Or any other solution to this problem?
div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; }
Test Test
And a jsfiddle: http://jsfiddle.net/z3sfwtn2/2/
The Problem
In some browsers the <button>
element doesn't accept changes to its display
value, beyond switching between block
and inline-block
. This means that a <button>
element cannot be a flex or grid container, or a <table>
, either.
In addition to <button>
elements, you may find this constraint applying to <fieldset>
and <legend>
elements, as well.
See the bug reports below for more details.
Note: Although they cannot be flex containers, <button>
elements can be flex items.
The Solution
There is a simple and easy cross-browser workaround to this problem:
Wrap the content of the button
in a span
, and make the span
the flex container.
Adjusted HTML (wrapped button
content in a span
)
<div>
<button>
<span><!-- using a div also works but is not valid HTML -->
<span>Test</span>
<span>Test</span>
</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
Adjusted CSS (targeted span
)
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
References / Bug Reports
Flexbox on a <button>
blockifies the contents but doesn't establish a flex formatting context
User (Oriol Brufau): The children of the
Add support for display:flex/grid and columnset layout inside <button>
elements
User (Daniel Holbert):