zoukankan      html  css  js  c++  java
  • css11----转载----元素垂直对齐

     css-实现元素/元素内容,垂直居中对齐

    一、单行内容的垂直居中(line-height:行高方法)

    只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,就可以了。

    缺点:1:这种方法局限性太大,只有单行文本的元素才适用,所以在多行元素中是不能使用这种方法的了。
             2 :IE中不支持<img>等的居中。

    优点:适合在所有浏览器,没有足够空间时,内容不会被切掉,同时支持块级和内联元素

       但是这种方法对运用在小元素上是非常有用的,比如说让一个button、或者单行文本字段。

    复制代码
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    .middle-demo-1{
        background-color:#f1f1f1;
        height: 30px;
        line-height: 30px;
    }
    </style>
    </head>
    <body>
        <div class="middle-demo-1">
             css实现元素
        </div>
    </body>
    </html>
    复制代码

    二、多行内容垂直居中,且容器高度可变:(padding:内边距方法)

    也很简单,给出一致的 padding-bottom 和 padding-top 就行
    优点:
    1. 同时支持块级和内联极元素
    2. 支持非文本内容
    3. 支持所有浏览器
    缺点:容器不能固定高度

    复制代码
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    .middle-demo-1{    
        padding-top: 24px;
        padding-bottom: 24px;
    }
    </style>
    </head>
    <body>
        <div class="middle-demo-2">
             css实现元素
        </div>
    </body>
    </html>
    复制代码

     

    三、把容器当作表格单元

    CSS 提供一系列diplay属性值,包括 display: table, display: table-row, display: table-cell 等,能把元素当作表格单元来显示。

    这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
    缺点:IE低版本不支持这些属性。如果需要兼容ie6,7,需要使用Hack
    要注意的是:和一个合法的<td>元素必须在<table>里一样,display: table-cell 元素必须作为 display: table 的元素的子孙出现。

    复制代码
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    .middle-demo-3{
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    background-color: #f1f1f1;
    }
    </style>
    </head>
    <body>
        <div class="middle-demo-3">
             css实现元素
        </div>
    </body>
    </html>
    复制代码

    四、已知宽高块元素的水平垂直居中

    绝对定位50%,margin负值

    缺点:由于固定死元素的高度,致使没有足哆的空间,当内容超过容器的大小时,要么会消息,要么会出现滚动条(如果元素在body内,当用户缩小浏览器窗口时,body的滚动条将不会出现)。 

    注意:其一元素定位关系到一个相对定位参考,所以要保证元素是相对于哪个为参考坐标;

    复制代码
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    .middle-demo-4{
        background-color: red;
         200px;/*元素的宽度*/
        height:200px;/*元素的高度*/
        position: absolute;
        left: 50%;/*配合margin-left的负值实现水平居中*/
        margin-left: -100px;/*值的大小等于元素宽度的一半*/
        top:50%;/*配合margin-top的负值实现垂直居中*/
        margin-top: -100px;/*值的大小等于元素高度的一半*/
    }
    
    </style>
    </head>
    <body>
        <div class="middle-demo-4">css元素本身水平垂直居中对齐,而不是其元素内容,主意区分</div>
    </body>
    </html>
    复制代码

     五:全兼容的水平垂直居中实例(原文:http://demo.doyoe.com/css/alignment/),

     1:vertical-align 只应用于inline level, inline-block level 及 table-cells 元素上;其次 vertical-align 的对齐就基于每个 line box(行框)的。

        简单的说,inline level元素按照 Normal flow 水平排版出一行就会形成一个line box,其高度由内容形成,如果换行,则又是另一个line box,所有一段文本可能会分布在多个line box里,这些不重叠的line box被称作为a vertical stack of line boxes(一个垂直堆叠的线框集合)这些。

    2: 换句话说,我们的垂直居中是要在每个line box中进行处理。
        而上例中我们想让一行文本在名叫demo的高100px的容器里垂直居中,这时有个问题就是demo容器并非 该行文本的line box,所以就算定    
        vertical-laign为middle也无法让该行文本在demo容器中垂直居中。

        我们知道line box的高度是由内容形成的,这时我们可以额外创建一个与该行文本处于同一line box的元素,同时将新增元素的高度定义为与demo容器相同,此时line box的高度将与demo一致,文本将会在line box内垂直居中 即同样实现了在demo容器中垂直居中。本例我们使用伪对象::after来创建那个新增元素,可以设置新增元    素为不可见。

    3:由于IE8以下浏览器不支持伪对象::after,于是我们通过IE条件注释为IE8以下浏览器新增一个额外元素span,其作用等同 inline-block #5 中的::after。本例支持所有主浏览器。

    4:由于ie6,7下不支持display:inline-block,

      IE6 中 inline 元素只要触发了 hasLayout 其表现就类似于 inline-block,这里设置 display:inline-block; 或者 zoom:1; 等其他属性值可以触发 hasLayout 

         表现出来是一样的。

    5:display:inline-block 后的元素会产生水平空隙 font-size:0:解决间隙问题

    复制代码
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #demo{
        height:100px;
        text-align:center;
        font-size:0;/*去除 inline-block 空隙*/
        background-color: red;
    }
    #demo:after,#demo span{
        display:inline-block;
        *display:inline;/*inline-block 兼容ie6,7*/
        *zoom:1;/*inline-block 兼容ie6,7*/
        0;
        height:100%;
        vertical-align:middle;
    }
    #demo:after{
        content:'';
    }
    #demo p{
        display:inline-block;
        *display:inline;/*inline-block 兼容ie6,7*/
        *zoom:1;/*inline-block 兼容ie6,7*/
        vertical-align:middle;
        font-size:16px;
    }
    
    </style>
    </head>
    <body>
        <div id="demo">
        <p>这是一个终极实现的水平垂直居中实例</p>
        <!--[if lt IE 8]><span></span><![endif]-->
    </div
    </body>
    </html>
    复制代码

    为了更加理解实现原理,这里贴出参照文和相关知识原理
    原文参照:http://demo.doyoe.com/css/alignment/

    inline-block的前世今生:http://www.iyunlu.com/view/css-xhtml/64.html   

    未知高度多行文本垂直居中:http://iyunlu.com/view/css-xhtml/77.html

     

    结语:我觉得以上5种方法在日常的工作中足够用了,而且实现原理简单,易于理解,如果不满足于以上的方法,可以看看以下链接的文章,不保证正确性,因为我觉得有部分小小的问题,大家看的时候好好斟酌啦,欢迎互相交流:

    http://www.w3cplus.com/css/vertically-center-content-with-css

     

  • 相关阅读:
    null in ABAP and nullpointer in Java
    SAP ABAP SM50事务码和Hybris Commerce的线程管理器
    Hybris service layer和SAP CRM WebClient UI架构的横向比较
    SAP ABAP和Linux系统里如何检查网络传输的数据量
    SAP CRM WebClient UI和Hybris的controller是如何被调用的
    SAP CRM和Cloud for Customer订单中的业务伙伴的自动决定机制
    SAP CRM WebClient UI和Hybris CommerceUI tag的渲染逻辑
    SAP BSP和JSP页面里UI元素的ID生成逻辑
    微信jsapi支付
    微信jsapi退款操作
  • 原文地址:https://www.cnblogs.com/kaililikai/p/5789660.html
Copyright © 2011-2022 走看看