你的位置:首页 > 软件开发 > 网页设计 > 关于的垂直居中的问题

关于的垂直居中的问题

发布时间:2016-01-18 17:00:06
居中分为垂直居中和水平居中,这里因为水平居中比较简单就不过多说了,然后垂直居中呢又分为以下几种情况种情况:1、单行居中  这个也简单直接line-height为容器的高度就行了。2、多行居中  和上面的单行居中差不多,只是line-height的值发生了变化,用容器高度除以行数, ...

居中分为垂直居中和水平居中,这里因为水平居中比较简单就不过多说了,然后垂直居中呢又分为以下几种情况种情况:

1、单行居中

  这个也简单直接line-height为容器的高度就行了。

2、多行居中

  和上面的单行居中差不多,只是line-height的值发生了变化,用容器高度除以行数,得到的结果就是line-height的值。

3、DIV垂直居中。这个也分为两种情况

  3.1、DIV知道高度的情况,这里就需要用到定位,下面是具体代码。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>    *{      margin: 0;      padding: 0;    }    body{      width: 100%;      height: 100%;    }    div{      width: 100%;      height: 400px;      position: absolute;      top: 50%;      left: 0;      margin-top: -200px;      background: red;    }    .box{      width: 100%;      height: 380px;      margin-top: -180px;      background: black;    }  </style></head><body>  <div>    <div class="box"></div>  </div></body></html>

原标题:关于的垂直居中的问题

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录