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