Home > Article > Web Front-end > How to set vertical alignment of paragraphs with CSS (code attached)
How to set vertical alignment of paragraphs with CSS (code attached)
- yuliaOriginal
- 2018-09-26 15:58:113070browse
When browsing the web, I often see some paragraphs that are vertically aligned. Today, this article will tell you how to use CSS to set the vertical alignment of paragraphs. Friends in need can refer to it. I hope it will be helpful to you. help.
In CSS, the vertical alignment of a paragraph is set through the attribute vertical-align.
Note that for the text itself, this attribute does not work for block-level elements, such as e388a4556c0f65e1904146cc1a846bee and dc6dce4a544fdca2df29d5ac0ea9906b tags. However, for tables, this attribute is very important. .
<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>The above code creates a table with 3 rows and 2 columns. The left column is filled with pictures, which increases the height of the cells and also serves as a comparison.
The column of text on the right side adopts top alignment, bottom alignment and middle alignment respectively. The corresponding CSS values are top, bottom and middle respectively.
If a specific value is set for the vertical-align attribute, the text itself can be displaced in the vertical direction.
<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>As shown in the above code, when the attribute value is a positive number, the text will move upward by the corresponding value, and when it is set to a negative number, it will move downward.
In addition, the vertical attribute has many other values, but it is mainly applicable to images.
The above is the detailed content of How to set vertical alignment of paragraphs with CSS (code attached). For more information, please follow other related articles on the PHP Chinese website!