zoukankan      html  css  js  c++  java
  • CSS中实现DIV容器垂直居中

    1.vertical-align:middle 垂直对齐

    如表格元素中的<td>、<th>、<caption>等,而像<DIV>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。

    2.text-align:center  文本水平居中

    一、单行垂直居中

    如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如:

    ExampleSourceCode 

    1. DIV{  
    2. height:25px;  
    3. line-height:25px;  
    4. overflow:hidden;  //使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行
    5. }  
    6.  不过在InternetExplorer6及以下版本中,这和方法不支持对图片设置垂直居中。

    二、多行未知高度文字的垂直居中

    如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把<DIV>完全填充的一种访求而已。可以使用类似下面的代码:

    1. DIV{  
    2. padding:25px;  
    3. }  

    这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

  • 相关阅读:
    加法图灵机
    Experiment 1
    进制转换
    快速排序
    辗转相除、线段交点、多角形面积公式
    JS如何优雅监听容器高度变化
    解决react和其他框架之间的交互问题
    MacBook Pro触控板手势
    代理 请求登录失效(显示未登录)问题
    Web端 长按事件
  • 原文地址:https://www.cnblogs.com/peng14/p/3048740.html
Copyright © 2011-2022 走看看