Maison > Article > interface Web > Comment définir l'alignement vertical des paragraphes avec CSS (code ci-joint)

Comment définir l'alignement vertical des paragraphes avec CSS (code ci-joint)

yuliaoriginal: 2018-09-26 15:58:113100parcourir

Lors de la navigation sur le Web, je vois souvent des paragraphes alignés verticalement. Aujourd'hui, cet article vous expliquera comment utiliser CSS pour définir l'alignement vertical des paragraphes. J'espère que ce sera le cas. utile pour vous.

En CSS, l'alignement vertical d'un paragraphe est défini via l'attribut vertical-align.

Notez que pour le texte lui-même, cet attribut ne fonctionne pas pour les éléments de niveau bloc, tels que les balises e388a4556c0f65e1904146cc1a846bee et dc6dce4a544fdca2df29d5ac0ea9906b.

<span style="font-size:24px;"><html>
<head>
<title>
垂直对齐
</title>
<style>
<!--
td.top{vertical-align:top;}
td.bottom{vertical-align:bottom;}
td.middle{vertical-align:middle;}
-->
</style>
</head>

<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="top">垂直对齐方式，top</td>
</tr>
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="bottom">垂直对齐方式，bottom</td>
</tr>
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="middle">垂直对齐方式，middle</td>
</tr>
</body>
</html>
</span>

Le code ci-dessus crée un tableau avec 3 lignes et 2 colonnes. La colonne de gauche est remplie d'images, ce qui augmente la hauteur des cellules et sert également de comparaison.

La colonne de texte sur le côté droit adopte respectivement l'alignement supérieur, l'alignement inférieur et l'alignement central. Les valeurs CSS correspondantes sont respectivement en haut, en bas et au milieu.

Si une valeur spécifique est définie pour l'attribut vertical-align, le texte lui-même peut être déplacé dans le sens vertical.

<span style="font-size:24px;"><html>
<head>
<title>
垂直对齐
</title>
<style>
<!--
span.zs{vertical-align:10px;}
span.fs{vertical-align:-10px;}
-->
</style>
</head>

<body>
<p>给对齐属性设置具体<span class="zs">数值</span>，正数</p>
<p>给对齐属性设置<span class="fs">具体</span>数值，负数</p>
</body>
</html>
</span>

Comme le montre le code ci-dessus, lorsque la valeur de l'attribut est un nombre positif, le texte se déplacera vers le haut de la valeur correspondante, et lorsqu'il est défini sur un nombre négatif, il se déplacera vers le bas.

De plus, l'attribut vertical a de nombreuses autres valeurs, mais il s'applique principalement aux images.

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

Article précédent：Comment mettre en place des hyperliens dynamiques avec CSS (code ci-joint)Article suivant：Comment mettre en place des hyperliens dynamiques avec CSS (code ci-joint)

Articles Liés

Voir plus