在网页的页面布局中，我们往往需要将某个容器内的元素，比如图片或者文字垂直居中，这样显得页面更加的好看。

css vertical-align 属性正是页面中垂直对齐的属性，它可以控制容器内元素的对齐方式。

语法

vertical-align: 对齐方式;

属性值

其对齐方式的值可以为：

值描述
baseline它将元素的基线与父元素的基线对齐。这是默认值。
length用于将元素的长度增加或减少指定的长度。也允许负值。
%用于增加或减少元素的百分比"line-height"属性。允许使用负值。
sub它像下标一样对齐元素。
super它像上标一样对齐元素。
top它将元素的顶部与行中最高元素的顶部对齐。
bottom它将元素的底部与行中的最低元素对齐。
text-top元素的顶部与父元素字体的顶部对齐。
middle元素放置在父元素的中间。
text-bottom
元素的底部与父元素的字体底部对齐。
initial它将这个属性设置为其默认值。
inherit从它的父元素继承这个属性。

middle正是垂直居中所需要的属性值。

注意的点

需要注意的是：

  1. 它适用于内联或内联块元素。
  2. 它影响元素的对齐方式，而不是其内容。 （表格单元格除外）
  3. 当它应用于表格单元格时，它会影响单元格内容，而不是单元格本身。

例子

1) 文字图片居中的例子：

<!DOCTYPE html>
<html>
	<title>css vertical-align 对齐方式例子</title>
<head>
<style>
	div{
		background-color:gray;
		width:240px;
		height:160px;
		float:left; 
		line-height:160px;
		margin-left:10px;
		text-align:center;
	}
	img {
		vertical-align: middle;
	}
	.div2{
		vertical-align:middle;
	}
</style>
</head>
<body>
<div class="div1"><img src="/static/default/yxjc/css/good-morning.jpg" /></div> 
<div class="div2">文字居中</div> 
	
	
</body>
</html>
css vertical-align 垂直居中属性

2）文字对齐的例子

<!DOCTYPE html>
<html>
	<title>css vertical-align 对齐方式例子</title>
<head>
<style>
img.top {
    vertical-align: text-top;
}
img.bottom {
    vertical-align: text-bottom;
}
</style>
</head>
<body>
<p><img src="/static/default/yxjc/css/good-morning.jpg" /> 这是具有默认对齐方式的图像。</p> 
<p><img src="/static/default/yxjc/css/good-morning.jpg" class="top" /> 这是一个文本顶部对齐的图像。</p> 
<p><img src="/static/default/yxjc/css/good-morning.jpg" class="bottom" /> 这是一个文本底部对齐的图像。</p> 
	
	
</body>
</html>
css vertical-align 垂直居中属性