完成DIV层内的文本竖直垂直居中(单写作字/多写作

日期:2020-09-23 类型:科技新闻 

关键词:如何制作微信小程序,微信小程序源码,小程序码生成,凡科网微信小程序,微信公众号小程序

假如是单写作字想竖直垂直居中,要是确保div高和行高维持1致,便可以了。用下面的编码便可完成:

拷贝编码
编码以下:

#div-a{
height:60px;
line-height:60px;
}

假如是多写作字,上面的竖直垂直居中的方式就不好了,得用变通的方式完成;这里提议应用table方式,在table外面再套上相应的div,

编码以下:

拷贝编码
编码以下:

<table>
<tr>
<td style="vertical-align:middle;height:300px;background-color:red"></td>
</tr>
</table>

多写作字垂直居中也有此外1种方式:

多行內容垂直居中,且器皿高宽比可变,也很简易,得出1致的 padding-bottom 和 padding-top 就行:

拷贝编码
编码以下:

.middle-demo⑵
{
padding-top: 24px;
padding-bottom: 24px;
}
上一篇:IE6/IE7中li底部4px间隙的Bug 返回下一篇:没有了