标签：
为什么设置的vertical-align垂直居中不起作用:
vertical-align属性可能使用并不是太频繁，但是有时候可能会使用vertical-align:middle设置对象内部的元素垂直居中对齐，但是有时候会发现此设置并非都会产生效果。代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> td{ width:200px; height:200px; border:1px solid red; vertical-align:bottom; } div{ width:60px; height:60px; background-color:#690; } </style> </head> <body> <table> <tr> <td><div></div></td> </tr> </table> </body> </html>
从以上代码的表现可以看出vertical-align属性起作用了。再来看一段实例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> .parent{ width:200px; height:200px; border:1px solid red; vertical-align:bottom; } .children{ width:60px; height:60px; background-color:#690; } </style> </head> <body> <div class="parent"> <div class="children"></div> </div> </body> </html>
以上代码的表现可以看出，这里的vertical-align属性并没有起作用。这是因为此属性只能应用于具有valign属性的元素，table元素具有valign属性，而div元素不具有，所以第二个例子中，vertical-align属性不会起作用。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0503/587.html
最为原始地址是:http://www.softwhy.com
标签：
原文地址：http://www.cnblogs.com/softwhy/p/4652395.html
