前端技巧CSS垂直对齐(vertical-align)属性的用法

CSS垂直对齐(vertical-align)属性的用法

在CSS里设置元素垂直对齐方式的属性是vertical-align,英文vertical中文翻译为“垂直的,竖立的”意思,该属性用于定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式,这句话读起来很拗口,只需了解就行,关于基线的定义本文就不做深究,本文简单的介绍一下关于垂直对齐属性的一些用法:

1. 图片垂直方向对齐,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
.box {margin:50px;}
</style>
</head>
<body>
<div class="box">
<img alt="test" src="1.png" />
<img alt="test" src="2.png" />
<img alt="test" src="3.png" />
<img alt="test" src="4.png" />
</div>
</div>
</body>
</html>

这里四张图片的显示效果如下图:

多张图片底部对齐.png

默认的情况下,图片的对齐方式是基于底部对齐,这里图片的底部就相当于基线baseline,这是vertical-align的默认值,下面试试将vertical-align设置为top和middle试试:

img {vertical-align:top;}

多张图片顶部对齐.png

img {vertical-align:middle;}

多张图片垂直居中对齐.png

2. 文本输入框与文字对齐,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
.box {margin:30px;}
.box span {display:inline-block;width:140px;}
textarea {width:205px;}
</style>
</head>
<body>
<div class="box">
<span>请输入个人资料:</span>
<textarea rows="4">
</textarea>
</div>
</body>
</html>

默认情况下,文本和输入框的对齐方式是这样的:

文本和输入框的对齐.png

如果要让文字和输入框的顶部对齐,则应该给文本框加上vertical-align:top这个定义:

textarea {vertical-align:top;}
3. 表格单元格内的内容对齐,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
.box {margin:30px;}
table {border-collapse:collapse;}
table,td {border:2px solid #ccc;}
td {width:200px;height:100px;}
</style>
</head>
<body>
<div class="box">
<table>
<tr>
<td>ABC</td>
<td>XYZ</td>
</tr>
</table>
</div>
</body>
</html>

单元格垂直居中.png

由于表格单元格td继承了tbody标签默认的垂直居中属性(tbody标签没有写,但它实际存在),相当于默认为vertical-align:middle,加入要让文本居顶对齐,则可以定义为:

td {vertical-align:top;}

单元格文字居顶对齐.png

4. 多行文本的垂直居中,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
.box {padding:5px;width:300px;height:250px;background:#555;color:#fff;}
</style>
</head>
<body>
<div class="box">
<p>新西兰为英联邦成员国,它位于太平洋西南部,领土由南岛、北岛组成。</p>
<p>首都惠灵顿以及最大城市奥克兰均位于北岛。</p>
</div>
</body>
</html>

这时候,如果box元素设置vertical-align垂直居中是无效的:

多行文本垂直居中.png

如果将该块以单元格的形式呈现就可以:

.box {vertical-align:middle;display:table-cell;}

多行文本垂直居中2.png

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/125.html