码迷,mamicode.com
首页 > 其他好文 > 详细

一行或者多行垂直居中问题

时间:2017-08-22 23:07:32      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:没有   如何   play   cell   script   不兼容   logs   属性   内容   

在实际开发中,我们会遇到很多需要多行垂直居中的问题,今天空闲做个总结。

 

1.首先一行问题我就不用说了,给一个line-height一般都能够解决垂直居中的问题。

但是如果是下面这中格式那该如何处理呢? 

<div>
    <p>多行多行多行多行</p>
    
      <p>多行多行多行多行</p>
</div>
方法一:也是最重要的。虽然这个方法不兼容ie6 ie7       
给div一个父盒子

将父盒子的css设置为display:table。
子盒子display:table-cell vertical-align:middle text-align:center

  

 方法二这个方法就是万能的了。代码就不上了。讲一下思路吧

首先还是给最大的盒子display:table。利用表格垂直居中的属性。

其次给内容和子进行绝对定位。相关内容margin-left:-50%;

 

本人实践,没有问题。如对您有帮助,请支持一下。

一行或者多行垂直居中问题

标签:没有   如何   play   cell   script   不兼容   logs   属性   内容   

原文地址:http://www.cnblogs.com/jack-lin/p/7413917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!