当前位置：首页 > 前端技术 > CSS >内容正文

CSS

CSS设置段落的垂直对齐

发布时间：2025/3/20 CSS 44 豆豆

生活随笔收集整理的这篇文章主要介绍了 CSS设置段落的垂直对齐小编觉得挺不错的,现在分享给大家,帮大家做个参考.

CSS设置段落的垂直对齐

CSS设置段落的垂直对齐方式

CSS中通过属性vertical-align来设置段落的垂直对齐方式。

注意，对于文字本身而言，该属性对于块级元素并不起作用，例如<p>和<div>等标记，但是，对于表格而言，这个属性十分的重要。

<span style="font-size:24px;"><html><head><title>垂直对齐</title><style></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>

如上代码，建立了一个3行2列的表格，其中左侧一列均为图片，起到了将单元格的高度加大的作用，同时也作为对比。

右侧的一列为文字，分别采用了顶端对齐、底端对齐和中间对齐的方式，对应的CSS的值分别为top、bottom和middle。

如果，对vertical-align属性设置了具体的数值，对于文字本身，则可以在垂直方向上发生位移。

<span style="font-size:24px;"><html><head><title>垂直对齐</title><style></style></head><body><p>给对齐属性设置具体<span class="zs">数值</span>，正数</p><p>给对齐属性设置<span class="fs">具体</span>数值，负数</p></body> </html> </span>

如上代码，当属性值为正数时，文字将向上移动相应的数值，设置为负数时则向下移动。

此外，vertical属性还有很多其他值，不过主要是适用于图片。

总结

以上是生活随笔为你收集整理的CSS设置段落的垂直对齐的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

css
段落