CSS设置段落的垂直对齐

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

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

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

<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>

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

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

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

<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>

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

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

CSS设置段落的垂直对齐相关推荐

html如何将段落对齐,如何用CSS设置段落的垂直对齐（附代码）
在浏览网页时,经常看到一些段落他是垂直对齐的,今天这篇文章就和大家讲讲如何用CSS设置段落的垂直对齐,有需要的朋友可以参考一下,希望对你有所帮助. CSS中通过属性vertical-align来设置段 ...
CSS设置段落的水平对齐
CSS设置段落的水平对齐 CSS设置段落的水平对其方式 CSS中通过属性text-align来设置段落的水平对其方式,可以设置为左.中.右和两端对齐等,控制段落文字的对齐,和word中一样的方便. & ...
html5中底部对齐怎么写,css设置元素底部垂直对齐
css中怎么让div里面的文字底部对齐两种办法,第一种可以作为默认选择.两种办法都可以让文字底部对齐. css如何使div里面的文字垂直对齐页面里有五段文字/图片,我想使每个部分的文字,像旁边的图 ...
CSS学习笔记（九）display: inline-block，CSS 布局- 水平和垂直对齐
CSS 布局 - display: inline-block display: inline-block 与 display: inline 相比,主要区别在于 display: inline-blo ...
css基准线研究：垂直对齐的实现-好的、差的和丑陋的
这或许是因为缺少基线网格的理解和欣赏,更或者是因为基线网格是出了名的难以实现, 迄今为止还没有人拿着蓝图让它成功实现. 有些人甚至认为基线在网络上是多余的,基线作为一种排版术语和网络上的行为,在网络上 ...
css 设置段落样式各种设置方式详细解释
我本来打算告诉你当你不在我身边的这段日子里我遇到的所有糟糕事但最后我只想告诉你我很想你设置段落样式今天我们详细讲讲设置段落样式的方式: 网页的排版离不开对文字段落的设置,这里主要讲述常用的 ...
CSS基础(part17)--vertical-align垂直对齐
学习笔记,仅供参考,有错必纠参考自:pink老师课堂笔记文章目录 vertical-align垂直对齐图片.表单和文字对齐去除图片底侧空白缝隙 vertical-align垂直对齐 verti ...
九、一篇文章帮助你读懂CSS属性：vertical-align 垂直对齐
3. vertical-align 垂直对齐有宽度的块级元素居中对齐,是margin: 0 auto; 让文字居中对齐,是 text-align: center; 但是我们从来没有讲过有垂直居中的属 ...
html文字段落设置,css中怎么设置段落样式？
段落是文章的基本单位,也是网页的基本单位.段落的放置与效果的显示会影响到页面的布局和风格.CSS样式提供了多种属性,来实现对页面中段落文本的控制. css设置段落样式的方法: 对齐方式通过 text- ...

CSS设置段落的垂直对齐

CSS设置段落的垂直对齐相关推荐

最新文章

热门文章