Flexbox ne fonctionne pas sur les éléments de bouton ou de fieldset
j'essaie de centrer les éléments internes d'une étiquette <button> avec justify-content: center de flexbox . Mais Safari ne les CENTRE pas. Je peux appliquer le même style à toutes les autres étiquettes et cela fonctionne comme prévu (voir l'étiquette <p> ). Seul le bouton est aligné à gauche.
essayez Firefox ou Chrome et vous pouvez voir la différence.
y a-t-il un style d'agent utilisateur que je dois réécrire? Ou toute autre solution à ce problème?
css lang-css prettyprint-override">div {
display: flex;
flex-direction: column;
width: 100%;
}
button, p {
display: flex;
flex-direction: row;
justify-content: center;
}
html lang-html prettyprint-override"><div>
<button>
<span>Test</span>
<span>Test</span>
</button>
<p>
<span>Test</span>
<span>Test</span>
</p>
</div>
et un jsfiddle: http://jsfiddle.net/z3sfwtn2/2 /
2 réponses
le problème est que l'élément <button> n'est pas conçu pour être un conteneur souple (ou grid).
au moment de la rédaction du présent document, les navigateurs Webkit (Chrome et Safari) adhèrent à ce principe de conception. Firefox et Edge ne le font pas. Je n'ai pas tester d'autres navigateurs.
par conséquent, vous ne devriez pas avoir de problème à faire un élément <button> un conteneur flex (ou grille) dans Firefox et Edge. Mais ne vous attendez pas à ce que cela fonctionne en Chrome ou en Safari.
Ce comportement s'applique actuellement à au moins trois éléments:
-
<button> -
<fieldset> -
<legend>
je suis théoricien, mais je crois que l'idée est de maintenir un niveau de bon sens lors de la conception D'éléments HTML. Par exemple, les dieux HTML voulaient empêcher les auteurs de transformer un bouton en une table.
cependant, au moins dans ce cas, il ya un solution simple et facile :
envelopper le contenu du
buttondans unspan, et faire lespanle récipient souple.
Ajusté HTML (enveloppé button contenu dans un 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>
ajusted CSS (targeted span )
button > span, p {
display: flex;
flex-direction: row;
justify-content: center;
}
NOTE: Bien qu'ils ne puissent pas être des conteneurs flexibles, les éléments button peuvent être des éléments flexibles.
, les Références:
Voici mon hack le plus simple.
button::before,
button::after {
content: '';
flex: 1 0 auto;
}