Alignement vertical du texte dans un élément de bloc

Question

Alignement vertical du texte dans un élément de bloc

Demandé el 2 de Mars, 2011: Quand la question a-t-elle été
109827 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je sais que la question de l'alignement vertical est toujours posée, mais je ne parviens pas à trouver une solution pour cet exemple particulier. J'aimerais que le texte soit centré dans l'élément, et non que l'élément soit lui-même centré :

HTML :

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

CSS :

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}

<ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

N'y a-t-il vraiment aucune propriété CSS3 pour cela ? Je serais prêt à ajouter un <span> mais je ne veux vraiment pas ajouter plus de balises que cela.

Merci !

Demandé el 2 de Mars, 2011 par Utilisateur non enregistré

Answer 1

4 Réponses

Answer 2

2voto

Anwar Points 2205

Vous pouvez également utiliser inline-table à côté de table-cell si vous souhaitez centrer vos éléments verticalement et horizontalement. Voici un exemple d'utilisation de ces propriétés d'affichage pour créer un menu :

.menu {
  background-color: lightgrey;
  height: 30px; /* calc(16px + 12px * 2) */
}

.menu-container {
  margin: 0px;
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  height: 100%;
}

.menu-item {
  list-style-type: none;
  display: inline-table;
  height: 100%;
}

.menu-item a {
  display: table-cell;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
  text-decoration: none;
  color: initial;
}

.text-upper {
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}

<header>
  <nav class="menu">
    <ul class="menu-container">
      <li class="menu-item text-upper text-bold"><a href="javascript:;">StackOverflow</a></li>
      <li class="menu-item"><a href="javascript:;">Getting started</a></li>
      <li class="menu-item"><a href="javascript:;">Tags</a></li>
    </ul>
  </nav>
</header>

Il fonctionne en fixant display: inline-table; à tous les <li> et en appliquant ensuite display: table-cell; y vertical-align: middle; aux enfants <a> . Cela nous donne le pouvoir de <table> sans l'utiliser.

Cette solution est utile si vous ne connaissez pas la hauteur de votre élément.

La compatibilité est très bonne (par rapport à la concurrence). caniuse.com ), avec Internet Explorer >= 8.

Répondu el 25 de Novembre, 2018 par Anwar (2205 Points )

Answer 3

1voto

Steve11235 Points 198

Voici la solution générale utilisant uniquement CSS, avec deux variantes. La première se centre verticalement dans la ligne courante, la seconde se centre dans un élément de bloc.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    <ul>
        <li>
            line one
        </li>
        <li>
            <span style="display: inline-block; vertical-align: middle">line two dot one
                <br />
                line two dot two</span>
        </li>
        <li>
            line three
        </li>
    </ul>
    <div style="height: 200px; line-height: 200px; border-style: solid;">
            <span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
                <br />
                line two dot two</span>
    </div>
</body>
</html>

Si je comprends bien, vertical-align ne s'applique qu'aux éléments inline-block, par exemple, <img> . Vous devez changer l'attribut display d'un élément en inline-block pour que cela fonctionne. Dans l'exemple, la hauteur de la ligne s'étend pour s'adapter à la portée. Si vous souhaitez utiliser un élément contenant, tel qu'un élément <div> pour que l'attribut line-height soit le même que la hauteur. Attention, vous devrez spécifier line-height : normal sur le contenu <span> ou il hérite de l'élément qui le contient.

Répondu el 13 de Juin, 2012 par Steve11235 (198 Points )

Answer 4

0voto

RozzA Points 176

Avec les remerciements de Vlad responder pour l'inspiration ; testé et fonctionnant sur IE11, FF49, Opera40, Chrome53

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  text-align: center; /* H align */
  vertical-align: middle;
}

se centre dans toutes les directions, même en cas d'habillage de texte, de sauts de ligne, d'images, etc.

J'ai fait un peu de fantaisie et j'ai fait un extrait.

li > a {
  height: 100px;
  width: 300px;
  display: table-cell;
  /*H align*/
  text-align: center;
  /*V align*/
  vertical-align: middle;
}
a.thin {
  width: 40px;
}
a.break {
  /*force text wrap, otherwise `width` is treated as `min-width` when encountering a long word*/
  word-break: break-all;
}
/*more css so you can see this easier*/

li {
  display: inline-block;
}
li > a {
  padding: 10px;
  margin: 30px;
  background: aliceblue;
}
li > a:hover {
  padding: 10px;
  margin: 30px;
  background: aqua;
}

<li><a href="">My menu item</a>
</li>
<li><a href="">My menu <br> break item</a>
</li>
<li><a href="">My menu item that is really long and unweildly</a>
</li>
<li><a href="" class="thin">Good<br>Menu<br>Item</a>
</li>
<li><a href="" class="thin">Fantastically Menu Item</a>
</li>
<li><a href="" class="thin break">Fantastically Menu Item</a>
</li>
<br>
note: if using "break-all" need to also use "&lt;br>" or suffer the consequences

Répondu el 1 de Octobre, 2016 par RozzA (176 Points )

Answer 5

0voto

Ankita Srivastava Points 41

N'UTILISEZ PAS LA 4ème solution en partant du haut si vous utilisez un réseau ag-grid. Elle résoudra le problème de l'alignement de l'élément au milieu, mais elle risque d'avoir des répercussions sur l'ag-grid (pour moi, je n'ai pas pu sélectionner la case à cocher après une ligne). Le problème ne vient pas de la solution ou de l'ag-grid mais d'une certaine manière la combinaison n'est pas bonne.

N'UTILISEZ PAS CETTE SOLUTION POUR AG-GRID

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}

li a:after {
    content:"";
    display: inline-block;
    width: 1px solid transparent;
    height: 100%;
    vertical-align: middle;
}

Répondu el 26 de Août, 2020 par Ankita Srivastava (41 Points )

Alignement vertical du texte dans un élément de bloc

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Alignement vertical du texte dans un élément de bloc

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: