web-dev-qa-db-fra.com

Comment centrer le texte verticalement dans un <span>?

Comment centrer verticalement le texte qui est entouré d'un <span>? Le <span> doit avoir min-height de 45px. Voici ce que j'envisage:

--------                  -------
text

                --->      text   


--------                  -------

J'ai essayé vertical-align ainsi que des méthodes de cet article . Aucun d'entre eux a travaillé

htmlcsscss3
14
Alex

Essayez d’utiliser flexbox , tous les navigateurs modernes le prennent en charge, avec le préfixe cela fonctionne également dans IE10.

span {
  min-height: 100px;
  display: inline-flex;
  align-items: center;
  border: 1px solid aqua;
}
<span>vertical center</span>

49
Stickers

Pendant que vous utilisez span, vous pouvez simplement changer la méthode d’affichage en table-cell. N'oubliez pas que si vous utilisez div au lieu de span, vous devrez peut-être utiliser une autre méthode.

span {
  height: 45px;
  border: 1px solid #444;
  display: table-cell;
  vertical-align: middle;
}
<span>text</span>

7
Mojtaba

La "vieille" façon de faire cela, si vous avez besoin d'une véritable prise en charge des anciens navigateurs (IE6 et IE7), consiste à utiliser line-height. Cette méthode n'autorise qu'une ligne de texte.

span {
    display: inline-block;
    line-height: 100px;
    border: 1px solid red;
}
<span>vertical center</span>

4
Midas
span{
height: 45px;
display: grid;
align-items: center;
}

 enter image description here

1
Isma Noor

Si vous devez aligner votre texte à l'intérieur de l'élément span à la fois horizontalement et verticalement, vous pouvez également essayer l'affichage en grille.

span.verticallycentered{
    display: inline-grid;
    align-items: center;
    text-align: center;
    font-size:20px;
    min-width:300px;
    max-width:300px;
    min-height:150px;
    margin: 4px;
    padding-left: 8px;
    padding-right: 8px;
    border: 1px solid black;
    background-color: silver;
}

<span class='verticallycentered'>vertically and horizontally centered text spanning over more than just one line</span>
0
Bruno 82

span est défini pour afficher en ligne et l'exemple que vous avez lié doit fonctionner avec les div qui sont définies pour afficher un bloc. Essayez d’ajouter un bloc d’affichage à votre portée, puis de suivre les conseils du lien. En les combinant, cela devrait fonctionner… .. Mais alors, pourquoi utiliser une durée?

0
Patrick Graham

Vous pouvez obtenir un alignement vertical du texte central à l'aide de l'une des approches ci-dessous, en fonction du navigateur que votre application va prendre en charge.

<span class="vertical-center">Center Text</span>

1) en utilisant display: inline-flex; (Si vous ciblez les navigateurs classiques tels que Chrome, Safari, IE11 et versions ultérieures, vous pouvez utiliser Flex) Vérifier: Puis-je utiliser https://caniuse.com/#search=inline-flex

.vertical-center {
  display: inline-flex;
  border: 1px solid #ddd;
  min-height: 100px;
  align-items: center;
}

2) Utilisation de display: table-cell; (Si vous ciblez aussi d'anciens navigateurs comme IE9, optez pour une seconde approche)

.vertical-center-table-cell {
    display: table-cell;
    border: 1px solid #ddd;
    height: 100px;
    vertical-align: middle;
}

Démo: JSFiddle

0
Prakash Upadhyay