html - Flexbox not working on button or fieldset elements -
i'm trying center inner elements of <button>
-tag flexbox's justify-content: center
. safari not center them. can apply same style other tags , works intended (see <p>
-tag). button left-aligned.
try firefox or chrome , can see difference.
is there user agent style have overwrite? or other solution problem?
div { display: flex; flex-direction: column; width: 100%; } button, p { display: flex; flex-direction: row; justify-content: center; }
<div> <button> <span>test</span> <span>test</span> </button> <p> <span>test</span> <span>test</span> </p> </div>
and jsfiddle: http://jsfiddle.net/z3sfwtn2/2/
the problem <button>
element cannot flex container in browsers.
depending on browser, html elements not accept display
changes. 3 of these elements are:
<button>
<fieldset>
<legend>
the idea maintain level of common sense when styling html elements. instance, rule prevents authors turning fieldset table.
however, there easy workaround in case:
solution: wrap content of
button
inspan
, , makespan
flex container.
adjusted html (wrapped button
content in span
)
<div> <button> <span><!-- using div works 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; }
note: although cannot flex containers, button
elements can flex items.
references:
Comments
Post a Comment