Compréhension complète de la production de pages Web à hauteur de ligne et à alignement vertical_HTML/Xhtml_Web

Mots précédents

La hauteur de ligne, la taille de la police et l'alignement vertical sont des attributs clés pour définir la disposition des éléments en ligne. Ces trois propriétés sont interdépendantes et la modification de la distance entre les lignes, la définition de l'alignement vertical, etc. nécessitent toutes leur coopération. Le contenu associé à la taille de la police a été présenté en détail dans Police CSS Cet article présentera principalement la hauteur de ligne et l'alignement vertical.

hauteur de ligne

Définition

La hauteur de ligne fait référence à la distance entre les lignes de base des lignes de texte. La hauteur de ligne n'affecte en fait que les éléments en ligne et autres contenus en ligne, et n'affecte pas directement les éléments au niveau du bloc. Vous pouvez également définir la hauteur de la ligne pour un élément au niveau du bloc, mais cette valeur s'applique uniquement au contenu en ligne du bloc. élément de niveau. Ce n’est qu’alors qu’il aura un impact. Déclarer la hauteur de ligne sur un élément de niveau bloc définira une hauteur minimale de zone de ligne pour le contenu de l'élément de niveau bloc

Valeurs :

Valeur initiale : normale

S'applique à : Tous les éléments

Héritage : Oui

Pourcentage : par rapport à la taille de la police de l'élément

Conditions Pour comprendre en profondeur la hauteur de ligne, vous devez comprendre la terminologie courante concernant la construction de boîtes de lignes.

Zone de contenu

Pour les éléments en ligne non remplacés ou une partie de texte anonyme, font-size et font-family déterminent la hauteur de la zone de contenu. Dans le cas de Song Dynasty, si la taille de la police d'un élément en ligne est de 15 px, la hauteur de la zone de contenu est de 15 px ; dans le cas d'autres polices, la hauteur de la zone de contenu n'est pas égale à la taille de la police

Boîte en ligne

La zone de contenu plus l'interligne est égal à la zone en ligne. Si la taille de la police d'un élément en ligne non remplacé est de 15 px et la hauteur de la ligne est de 21 px, la différence est de 6 px. L'agent utilisateur divise ces 6 pixels en deux et applique une moitié en haut et en bas de la zone de contenu, ce qui donne la boîte en ligne

Lorsque la hauteur de ligne est inférieure à la taille de la police, la zone en ligne est en réalité plus petite que la zone de contenu

Boîte de ligne

Une zone de ligne est définie comme la distance entre le haut de la zone en ligne la plus haute d'une ligne et le bas de la zone en ligne la plus basse, et le haut de chaque zone de ligne est à côté du bas de la zone de ligne de la précédente. ligne

Propriétés de la boîte

Le remplissage, les marges et les bordures n'affectent pas la hauteur de la zone de ligne, c'est-à-dire qu'ils n'affectent pas la hauteur de la ligne

La limite des éléments en ligne est contrôlée par la taille de la police au lieu de la hauteur de la ligne

Les marges ne seront pas appliquées en haut et en bas des éléments en ligne non remplacés

Margin-left, padding-left et border-left sont appliqués au début de l'élément tandis que margin-right, padding-right et border-right sont appliqués à la fin de l'élément

Remplacer l'élément Les éléments de remplacement en ligne doivent utiliser une valeur de hauteur de ligne afin que l'élément puisse être positionné correctement lorsqu'il est aligné verticalement. Parce que la valeur en pourcentage de l'alignement vertical est calculée par rapport à la hauteur de ligne de l'élément. Pour l'alignement vertical, la hauteur de l'image elle-même n'a pas d'importance, la clé est la valeur de line-height

Par défaut, les éléments de remplacement en ligne sont placés sur la ligne de base. Si vous ajoutez un remplissage inférieur, des marges ou des bordures à l'élément remplacé, la zone de contenu se déplace vers le haut. La ligne de base de l'élément remplacé est la ligne de base de la dernière boîte de ligne en flux normal. Sauf si le contenu de l'élément de remplacement est vide ou si la valeur de son attribut de débordement n'est pas visible, dans ce cas, la ligne de base est le bord inférieur de la marge

alignement vertical

Définition Vertical-align est utilisé pour définir l'alignement vertical. Tous les éléments alignés verticalement affecteront la hauteur de la ligne

Valeurs : ligne de base | super haut | texte-haut milieu | texte-bas |

Valeur initiale : référence

Appliquer à : éléments en ligne, éléments de remplacement, cellules de tableau

Héritage : Aucun

Pourcentage : par rapport à la hauteur de ligne de l'élément

[Remarque] La valeur en pourcentage de l'alignement vertical dans le navigateur IE7 ne prend pas en charge la hauteur de la ligne décimale, et lors de la prise de valeurs telles que la ligne de base, le milieu, le texte en bas, etc., l'effet d'affichage est différent de celui des navigateurs standards. La solution courante est Set display:inline-block

pour les éléments en ligne.

Code CSS

Copier le contenu dans le presse-papiers

1. vertical-align:baselinebaseline (la ligne de base de l'élément est alignée avec la ligne de base de l'élément parent )
2. vertical-align:sub (abaisser la ligne de base de l'élément à la position d'indice appropriée du parent élément)
3. vertical-align:super (élève la ligne de base de l'élément à la position en exposant appropriée de l'élément parent)
4. alignement-vertical:basbas(Aligner le bas de l'enfant aligné éléments La fin est alignée avec le bas de la case de ligne)
5. vertical-align:text-bottom(aligner le bas de l'élément avec le bas du parent zone de contenu de l'élément alignée à la fin)
6. vertical-align:top(Aligner le haut des éléments enfants alignés avec le haut de la ligne boîte)
7. vertical-align:text-top(Aligner le haut de l'élément avec le haut du parent zone de contenu de l'élément)
8. alignement vertical:milieu(Le milieu de l'élément et la ligne de base de l'élément parent plus 1 /2 Alignement en hauteur de la lettre X dans l'élément parent)
9. alignement vertical:(-n)px (les éléments sont décalés de haut en bas de npx par rapport à la ligne de base)
10. alignement-vertical:x% (par rapport à la valeur hauteur de ligne de l'élément)
11. vertical-align:inherit (hérite de la valeur de l'attribut vertical-align de l'élément parent)

[Note] _{et ^{portent le style vertical-align:sub/super}}

Espace en bas du bloc en ligne

L'élément inline-block laisse un espace dans l'élément de niveau bloc car l'alignement vertical par défaut de l'image est l'alignement de base (en principe, le bord inférieur de l'image est aligné avec le bord inférieur de la lettre anglaise majuscule X du texte anonyme) tandis que le texte anonyme Il y a une hauteur de ligne, donc le bord inférieur de X est à une certaine distance du cadre de ligne. Cette distance est l'espace laissé par l'image

.

Il existe donc plusieurs solutions pour résoudre ce problème

[1]affichage:bloc

Étant donné que l'alignement vertical ne peut être appliqué qu'aux éléments remplacés et aux éléments en ligne, le passage aux éléments au niveau du bloc invalidera l'alignement vertical

[2] Hauteur de ligne du parent : 0

Cela rend la distance entre le texte anonyme et la zone de ligne 0

[3]alignement vertical : haut/milieu/bas

Postuler

【1】Une seule ligne de texte est centrée horizontalement et verticalement

Code XML/HTMLCopier le contenu dans le presse-papiers

1. div{
2. hauteur de ligne : 100px
3. largeur : 100px
4. texte-align : centre ;
5. bordure : 1px noir uni
6. }
8. div>Texte de testdiv>

[Note] De nombreux endroits disent que le centrage vertical d'une seule ligne de texte signifie définir la hauteur et la hauteur de la ligne à la même valeur, mais il n'est en fait pas nécessaire de définir la hauteur. Définissez simplement la hauteur de la ligne et le texte lui-même sera centré verticalement dans la ligne

【2】L'image est approximativement centrée verticalement

Code XML/HTMLCopier le contenu dans le presse-papiers

1. div{
2. hauteur de ligne : 200px
3. texte-align : centre ;
4. }
5. img{
6.  alignement vertical : milieu ;
7. }
8. div>
9.  img src="Compréhension complète de la production de pages Web à hauteur de ligne et à alignement vertical_HTML/Xhtml_Web" alt="Compréhension complète de la production de pages Web à hauteur de ligne et à alignement vertical_HTML/Xhtml_Web">
10. div>

Parce que le caractère X n'est pas centré verticalement dans la zone em et que les positions haute et basse du caractère X dans chaque police sont incohérentes. Ainsi, lorsque la taille de la police est plus grande, la différence est plus évidente

[Note] Lors de l'écriture d'éléments de niveau bloc contenant des éléments en ligne, les navigateurs IE7 doivent les écrire dans des sauts de ligne au lieu de les écrire sur une seule ligne

Copier code

Le code est le suivant :

//Corriger 1

/ /Corriger 2

//Erreur

【3】L'image est complètement centrée verticalement

Sur la base de la méthode 2, définissez la taille de police de l'élément de niveau bloc sur 0, puis vous pouvez définir l'image pour qu'elle soit complètement centrée verticalement

Copier le code

Le code est le suivant :

div{ line-height : 200px ; : milieu;>

Copier le code

Le code est le suivant :

;img src="Compréhension complète de la production de pages Web à hauteur de ligne et à alignement vertical_HTML/Xhtml_Web" alt="Compréhension complète de la production de pages Web à hauteur de ligne et à alignement vertical_HTML/Xhtml_Web" >

【4】Le texte multiligne est centré horizontalement et verticalement

En raison de la limitation de la définition de la taille de police à 0 dans la méthode 3, le texte ne peut pas être placé dans des éléments de niveau bloc. La méthode 4 obtient principalement l'effet de centrage vertical en ajoutant de nouveaux éléments. Cette méthode peut également être utilisée pour le centrage horizontal et vertical des images

.

Code XML/HTMLCopier le contenu dans le presse-papiers

1. div{   
2.     hauteur : 100 px ;   
3.     largeur : 200 px ;   
4.     couleur de fond : rose ;   
5.     text-align: center;   
6. }   
7. durée{   
8.     display:inline-block;   
9.     alignement vertical : milieu ;   
10.     hauteur de ligne : 20 px ;   
11.     largeur : 100 px ;   
12. }       
13. je{   
14.     affichage : bloc en ligne ;   
15.     hauteur : 100 % ;   
16.     alignement vertical : milieu ;   
17. }  

Code XML/HTML复制内容到剪贴板

1. div>  
2.        i>i>span>我是特别长的特别长的特别长的特别长的多行文字span>  
3.    div>    

 

【5】图标和文本对齐

使用长度负值

复制代码

代码如下 :

img{ alignement vertical : -5px ;}

　　根据实践经验，20*20像素的图标后面跟14px的文字，vertical-align设置为-5px可以达到比较好的对齐效果

使用文本底部对齐

复制代码

代码如下 :

img{ alignement vertical : texte en bas ;>

　　使用baseline会使图标偏上；使用top/bottom会受到其他行内元素影响造成定位偏差；使用middle需要恰好的字体大小且兼容性不高；使用text-bottom较合适，不受行高及其他内联元素影响

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/xiaohuochai/p/5271217.html