zoukankan      html  css  js  c++  java
  • 一行或者多行垂直居中问题

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

    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%;

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

  • 相关阅读:
    javascript的自定义对象
    解决trim兼容性
    AJAX
    javascript中的默认对象
    js原始数据类型
    javascript的内置对象
    空判断啊
    javascript的继承
    html如何设置P的高度为零?
    asp.net 生成静态页 自动分页
  • 原文地址:https://www.cnblogs.com/jack-lin/p/7413917.html
Copyright © 2011-2022 走看看