zoukankan      html  css  js  c++  java
  • CSS垂直居中对齐

    用CSS有多种方法实现垂直居中对齐。如果已知外部div的高度,不管是否知道内部div的高度,垂直居中实现起来很简单,但如果内部div高度是变量,如文字,垂直居中实现起来就比较复杂了,很可能需要使用hacks。如:

    <div id="containingBlock">
          <div><p>This sentence will change in each example</p> </div>
    </div>

    1、已知高度情况

    很简单,直接计算就可以了

    #containingBlock {display: block; height: 200px;}
    #containingBlock div {height:50px; margin: 75px 0;}

    2、通过display: table属性布局

    通过使用 display: table;vertical-align: middle可以比较轻松的实现垂直居中,但IE6和IE7并不识别table和table-cell属性,必须使用hacks作为补充。

    #containingBlock {display: table; height: 200px; position: relative; overflow: hidden;}
    #containingBlock div {display: table-cell; vertical-align: middle;}

    IE6和IE7的CSS

    #containingBlock {height: 200px; position: relative; overflow: hidden;}
    #containingBlock div { position: absolute; top: 50%;}
    #containingBlock div p {position: relative; top: -50%;}

    显示为

    IE6和IE7的hack

    //Vertical Alignment Table Display Hack
    #containingBlock {display:table; height: 200px; position: relative; overflow: hidden; }
    #containingBlock div {*position: absolute; top: 50%; display: table-cell; vertical-align: middle;}
    #containingBlock p {*position: relative; top: -50%;}

    补充: 如果想实现流式布局,加入如下CSS

    html, body, #containingBlock {height: 100%; position:relative; }
    #containingBlock div {height: 50%; position: absolute; top: 25%; }

    3. 垂直居中所用到的参数

    描述

    length

    Raises or lower an element by the specified length.

    Negative values are allowed

    %

    Raises or lower an element in a percent of the “line-height”

    property. Negative values are allowed

    baseline

    Align the baseline of the element with the baseline of the parent element.

    This is default

    sub

    Aligns the element as it was subscript

    super

    Aligns the element as it was superscript

    top

    The top of the element is aligned with the top of the

    tallest element on the line

    text-top

    The top of the element is aligned with the top of

    the parent element’s font

    middle

    The element is placed in the middle of the parent element

    bottom

    The bottom of the element is aligned with the

    lowest element on the line

    text-bottom

    The bottom of the element is aligned with the

    bottom of the parent element’s font

    inherit

    Specifies that the value of the vertical-align property

    should be inherited from the parent element

    参考:Vertical Centering With CSS

     

  • 相关阅读:
    Bzoj_1562 [NOI2009]变换序列
    Bzoj_1443 [JSOI2009]游戏Game
    Bzoj_3572 [Hnoi2014]世界树
    【python】按顺序排列组合输出字符串
    【python】通过LibreOffice把html文件转换成docx文件
    【python】判断一个地址是ipv4还是ipv6
    【python】判断一个字符串是否是数字
    【python】ImportError: cannot import name 'QWebView'
    【python】ModuleNotFoundError: No module named 'PyQt5.QtWebKitWidgets'
    【GNS3】Error 9: Unknown boot failure
  • 原文地址:https://www.cnblogs.com/JoannaQ/p/3601543.html
Copyright © 2011-2022 走看看