Maison  >  Article  >  interface Web  >  Comment centrer verticalement des éléments de liste () à l'intérieur d'une liste horizontale non ordonnée () ?

Comment centrer verticalement des éléments de liste () à l'intérieur d'une liste horizontale non ordonnée () ?

DDD
DDDoriginal
2024-10-31 21:13:29812parcourir

How to Vertically Center List Items () Inside a Horizontal Unordered List ()?

Alignement vertical

  • Éléments dans

      Alignement vertical de

    • éléments à l'intérieur d'un
        est souvent nécessaire pour l’esthétique et la convivialité. Voici une solution :

        CSS peut être utilisé pour définir la hauteur de ligne du

      • éléments égaux à leur hauteur, comme ci-dessous :

        <code class="css">li {
            height: 30px;
            line-height: 30px;
        }</code>

        Dans le code fourni :

        • Chaque
        • a une hauteur de 100px.
        • Les boutons ont une hauteur différente de 50px (donnée par la classe .button).

        Pour centrer verticalement le contenu, vous devez ajouter la hauteur de ligne suivante valeurs à votre feuille de style :

        <code class="css">.toolbar li {
            line-height: 100px; /* For regular list items */
        }
        .toolbar li.button {
            line-height: 50px; /* For button list items */
        }</code>

        Cela garantira que tous les éléments de la liste et leur contenu sont positionnés verticalement au milieu.

        Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

  • Déclaration:
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn