J'ai une classe de boutons avec les styles suivants:
.button {
align-items: center;
background-color: #fff;
border: 2px solid;
border-color: #f48120;
color: #f48120;
cursor: pointer;
display: inline-flex;
font-size: 20px;
font-weight: bold;
justify-content: center;
margin-bottom: 5px;
padding: 3px 10px;
position: relative;
text-transform: lowercase;
}
.button::after {
background-color: #fff;
bottom: -4px;
content: "f111";
display: flex;
font-family: "FontAwesome";
font-size: 5px;
justify-content: center;
position: absolute;
width: 25%;
}<button class="button">Enviar</button>Dans Firefox, il se présente comme prévu:
Mais dans Chrome, Safari et Vivaldi, cela ressemble à ceci:
Si je décoche puis coche à nouveau l'attribut "position: absolute" dans l'inspecteur, le cercle s'aligne au centre. Est-ce un bogue Blink / Webkit?
Réponses:
1 pour la réponse № 1Les éléments absolus ne seront pas positionnés par les parents alignés. Il suffit de le positionner à gauche et de le transformer pour le centrer.
juste une sidenote, il n'y a pas besoin d'utiliser display: flex; sur l'élément absolu.
.button {
align-items: center;
background-color: deeppink;
border: 2px solid;
border-color: aqua;
cursor: pointer;
display: inline-flex;
font-size: 20px;
font-weight: bold;
justify-content: center;
margin-bottom: 5px;
padding: 3px 10px;
position: relative;
text-transform: lowercase;
}
.button:after {
content: "";
background-color: deepskyblue;
bottom: -4px;
font-size: 5px;
position: absolute;
width: 25%;
height: 10px;
left: 50%;
transform: translateX(-50%);
}<button type="button" class="button">Submit</button>0 pour la réponse № 2
Quatre points à considérer:
Les éléments flex qui sont absolument positionnés n'acceptent pas les propriétés flex du parent. Étant donné qu’ils sont hors de flux, les enfants d’un conteneur Flex positionnés de manière absolue sont retirés d’un contexte de mise en forme flexible et revenir à un bloquer le contexte de mise en forme (ou autre modèle de boîte).
HTML
<button>les éléments ne peuvent pas être des conteneurs flexibles.