Pourquoi le texte n'est-il pas aligné au centre lors du placement d'une image dans la li? Si je supprime l'img, le texte est centré. J'essaie d'atteindre les deux centrés.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li hover {
background-color: #111;
}
</style>
</head>
<body>
<ul>
<li>
<span class="text">Home</span>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII="/>
</li>
<li>
<span class="text">News</span>
</li>
</ul>
</body>
</html>
4 Réponses :
En fait, l'image est également centrée dans le cadre du texte car les éléments img sont affichés en ligne par défaut.
En fonction de votre objectif, vous pouvez avoir le img em > sur son propre li ou positionnez-les absolument comme ceci:
li {
position: relative;
padding-left: 30px;
}
li img{
position: absolute;
left: 0;
}
Mais dans votre exemple, l'image n'est pas centrée verticalement.
Veuillez ne pas créer de lien vers du code car les liens peuvent disparaître avec le temps. Modifiez votre réponse et insérez votre code exécutable dans un "extrait de code" ici.
@ScottMarcus J'ai inclus la partie la plus importante, qui était le CSS, pour illustrer mon exemple, dois-je inclure tout le reste?
Tout ce que vous allez inclure, il doit être inclus ici même dans votre réponse, pas avec des liens tiers. Il n'y a aucune raison pour Fiddles ou CodePens car Stack Overflow a cette capacité intégrée avec des "extraits de code".
La propriété text-align est utilisée pour aligner les éléments horizontalement, pas verticalement.
Changez simplement votre élément
: flex; puis utilisez la propriété align-items pour centrer verticalement les éléments
De plus, vous devez changer votre sélecteur css li hover à li:hover.
Vérifiez et exécutez le extrait de code suivant pour un exemple pratique de ce qui précède :
<ul>
<li>
Home
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAARElEQVR42mNgGAVUAApAfB+I/6Ph+1A5ssB/MvHgsYAugOauH7Vg1IJRC0YtIAI8IsHwR+RY4AHEj4kw/DFU7SggDwAAyTHHV/YXjncAAAAASUVORK5CYII=" />
</li>
<li>News</li>
</ul>
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;
display: flex;
width: 100%;
height: 50px;
align-items: center;
}
li {color: white;text-decoration: none;
display: flex;
align-items: center;
}
li:hover {background-color: #111;}
si vous souhaitez centrer l'image, utilisez:
text-align: center;
puis centrez le texte en utilisant
img{
margin: auto;
}
Il existe plusieurs façons d'obtenir un alignement vertical et horizontal.
Comme @ AndrewL64 l'a expliqué, vous pouvez utiliser flex et utiliser la propriété align-items pour centrer l'élément. Il s'agit de l'approche la plus moderne et la plus recommandée pour créer une mise en page réactive.
Vous pouvez définir la propriété display de l'élément sur block et utiliser margin: 0 auto pour centrer l'élément verticalement et horizontalement.
/ p>
Ou vous pouvez définir la propriété display de l'élément sur inline-block ou inline sur lequel vous pouvez utiliser le texte -align: propriété du centre . Il est important de noter que cette propriété n'agit que sur le contenu interne des conteneurs block et n'affecte que les éléments inline ou inline-block .
Cet article de Sarah Cope explique bien les mécanismes de ces propriétés
Voulez-vous dire centrer verticalement? Parce qu'horizontalement, il semble que vous les avez fait flotter à gauche
Oui, je veux dire verticalement.
text-align n'a rien à voir avec l'alignement vertical.
Oh, ok, alors ils auraient dû ajouter le mot horizontal à celui-là.
Parce que
text-alignne s'aligne qu'horizontalement?