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 in span, , make span 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; } 

revised demo

note: although cannot flex containers, button elements can flex items.

references:


Comments

Popular posts from this blog

account - Script error login visual studio DefaultLogin_PCore.js -

xcode - CocoaPod Storyboard error: -