J'ai une liste avec trois articles. Le logo, le titre, les icônes sociales. Comment puis-je centrer le 2e élément de la liste
Ceci est mon hmtl5 p>
p>
<div class="menu"> <ul> <li><img src="{{asset('img/menu.svg')}}" class="icon"></li> <li> <p>The Financial Clue</p> </li> <li>Social Icons</li> </ul> </div>
4 Réponses :
Vous pouvez utiliser Flexbox. Ajouter le code suivant dans les styles:
--- 1ère option serait juste de définir le code: Align-items: centre; code> ou juste
align: centre; code> dans votre style.css ---
<div class="menu">
<ul>
<li><img src="{{asset('img/menu.svg')}}" class="icon"></li>
<li>
<p>The Financial Clue</p>
</li>
<li>
<center>
<h3>Social Icons<h3>
</center>
</li>
</ul>
</div>
Ce n'est même pas obsolète, c'est obsolète b > un jour vous vous réveillez et une nouvelle version chromée vient et voit que cette balise ne fonctionne plus.
Vous pouvez utiliser Text-Align: Centre pour centrer le texte et la verticale-alignement: moyen de sorte que vos éléments de liste soient centrés horizontalement. Conseillé de donner à votre parent / liaison de largeur de manière à ce que le texte-align ait une largeur au centre de l'intérieur.
espère que cela aide p>
p>
<div class="menu"> <ul> <li><img src="{{asset('img/menu.svg')}}" class="icon"></li> <li> <p>The Financial Clue</p> </li> <li>Social Icons</li> </ul> </div>
Si vous voulez centrer tous les éléments de la liste pouvant simplement être faite à l'aide de flexbox , l'espace entre la valeur distribuera uniformément les valeurs le long de la ligne. si vous voulez centrer l'élément de la liste médiane à l'aligner avec Les deux autres éléments de la liste, les balises code> ajouteront un remplissage supplémentaire autour du texte. Vous voudrez peut-être supprimer cela à moins d'une raison valable pour qu'il soit là. P > p>
Qu'est-ce que tu veux dire exactement par "centre"?
Est-ce toujours un
code>?
Voulez-vous le centrer verticalement, horizontalement ou les deux?