vertical-align:middle; 这个属性怎么用,无效解决办法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	img {
		width:400px;
		}
	#a1 {
		vertical-align:middle;
		}
	#a3 {
		vertical-align:middle;
		}
</style>
</head>

<body>
	<img id="a1" src="http://res.dyhjw.com/ueditor/php/upload/image/20170718/1500348235357918.jpg" />
	<img id="a2" src="http://res.dyhjw.com/ueditor/php/upload/image/20170718/1500348235357918.jpg" />
      <img id="a3" src="http://res.dyhjw.com/ueditor/php/upload/image/20170718/1500348235357918.jpg" />
</body>
</html>

vertical-align:middle; 不能垂直居中怎么办?其实是这样理解的。该属性是相对于相邻元素才会起作来,例如上面的代码,3个img元素都是相邻元素。

a1相对于a2中间线对齐,如果body里面只有一个img元素的话,该属性就不起作用。

a3相对于邻居元素a2对齐。

 

  附加阅读:利用vertical-align:middle实现在整个页面居中

http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.html

posted @ 2017-07-18 13:55  stma  阅读(1883)  评论(0)    收藏  举报