1.单行文本是通过设置父元素的height和line-height高度一致来完成的，其中height是指元素的高度,line-height是指行间距。
案例：
写一个
我是单行文本，我想垂直居中效果如图：
2.在
结果如图:
3.父元素的高度确定，table标签包裹然后设置vertical-align：middle
案例：
写三个
我是多行文本1，我想垂直居中
我是多行文本2，我想垂直居中
我是多行文本3，我想垂直居中
效果如图：
4.table（因为td标签默认情况下就默认设置了vertical-align为middle。所以不用重新再写vertical-align:middle）标签包裹代码设置.
用DW，这种做法也是每个里面都加上align=center，如果觉得代码不够简练就用CSStd {
text-align: center
}
相同的
.ys{
你的CSS代码
}
你自己命名的class 前面得加点的哦 .ys{}
span class=ys 标准写法是要加上引号的 <span class = "ys"></span>align=center也是
<head><style type="text/css">
td {
text-align:center/*设置水平居中*/
vertical-align:middle/*设置垂直居中*/
}
</style>
</head>
<body>
<table border="1" cellspacing="0" width="800px" height="190px">
<tr>
<td>monday</td>
<td>tuesday</td>
<td>wednesday</td>
</tr>
<tr>
<td>thursday</td>
<td>friday</td>
<td>satarday</td>
</tr>
<tr>
<td>sunday</td>
<td>friday</td>
<td>satarday</td>
</tr>
</table>
</body>
说明：如果要在css中控制<td>标签中的文字垂直居中，那么可以设置td标签选择器下的属性：vertical-align这个属性有三个值：top ，bottom，middle 其中，middle属性值代表垂直居中。
代码：td {
vertical-align:middle
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）