Comment les éléments obtiennent-ils un alignement vertical du texte sans « hauteur de ligne » explicite ?

L'alignement vertical énigmatique dans Éléments

Dans le monde du développement web, le L’élément nous laisse souvent perplexe avec sa capacité apparemment magique à maintenir son texte centré verticalement. Pour percer ce mystère, analysons un extrait de code HTML et CSS :

<code class="html"><button class="button">Some Text</button>
<div class="button">Some Text</div></code>

<code class="css">.button {
  background: darkgrey;
  height: 40px;
  border: 2px solid grey;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  font-family: helvetica;
  text-align: center;
  margin-bottom: 20px;
}</code>

Dans ce scénario, le texte du L'élément reste centré malgré l'absence d'une propriété explicite de hauteur de ligne.

Plongée dans la magie du navigateur

Lors de l'inspection du rendu du navigateur, nous découvrons un élément caché imbriqué dans le étiqueter. Dans Firefox, cela s'appelle moz-button-content. Cet élément est défini dans la feuille de style de l'agent utilisateur du navigateur comme :

<code class="css">*|*::-moz-button-content {
  display: block;
}</code>

Cet élément caché joue un rôle crucial dans le centrage vertical du texte. Il est configuré pour s'afficher sous forme d'élément de bloc, ce qui fait que l'élément occupe toute la hauteur disponible du bouton. Au sein de cet élément, le texte est naturellement aligné au centre.

Le positionnement vertical codé en dur

Cependant, ce n'est pas toute l'histoire. Les navigateurs utilisent un comportement supplémentaire codé en dur pour elements :

<code class="cpp">// Center child in the block-direction in the button
nscoord extraSpace =
    buttonContentBox.BSize(wm) - contentsDesiredSize.BSize(wm);

childPos.B(wm) = std::max(0, extraSpace / 2);</code>

Ce code démontre que les navigateurs ajoutent intentionnellement un espace supplémentaire des deux côtés du texte dans l'élément moz-button-content, le centrant efficacement verticalement.

Mettre Tout ensemble

En résumé, l'alignement vertical dans éléments découle de deux facteurs :

• La présence de l'élément moz-button-content, qui affiche le texte sous forme de bloc et l'aligne naturellement au centre.
• Le problème comportement codé du navigateur qui centre davantage l'élément moz-button-content dans le bouton.

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!