How to set vertical alignment of paragraphs with CSS (code attached)-CSS Tutorial-php.cn

How to set vertical alignment of paragraphs with CSS (code attached)

yulia

Release： 2018-09-26 15:58:11

Original

3096 people have browsed it

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

and

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>

Copy after login

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>

Copy after login

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!