top

元素纵向居中的一种办法

2017年07月07日

Home > learn > 元素纵向居中的一种办法

当需要某个元素上下剧中时,

通常我会使用position或者是调整上下边距,

但是在响应手机端时遇到一个一个问题。

 

 

 

在制作本站的时候,我希望手机端导航纵向居中,使用了margin-top的百分比,

但是当手机横屏的时候,由于纵向尺寸不够,出现了下面这种状况。

 

 

类似这种情况可以使用vertical-align: middle这个属性。

首先在需要纵向居中的元素外加一个容器,赋予属性:style=”display: table;”

然后给本身属性:display: table-cell; vertical-align: middle; height: auto;

就可以了。

标签:

上一篇:

下一篇: