在使用vertical-align经常会遇见其没有起到垂直居中的效果，这是因为此属性只能应用于具有valign属性的标签。
vertical-align属性可参考：http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
定义和用法
vertical-align 属性设置元素的垂直对齐方式。
说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
下面是实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">
<title></title>
<style type="text/css">
.div1{
width:200px;
height:200px;
border:1px solid red;
vertical-align:bottom;
}
.div2{
width:60px;
height:60px;
background-color:#690;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
然而这段代码中的vertical-align属性并没有起到居中作用。因为table标签具有valign属性，而div标签没有。
时间： 2024-12-25 08:23:40