为什么设置的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.softwhy.com