zoukankan      html  css  js  c++  java
  • css布局-多行文字垂直居中

    方法一:

    <style>  
        *{padding: 0;margin:0;font-size: 12px;}  
        div{float: left; 200px;height:200px;margin: 10px;border:1px solid blue; line-height: 200px;}  
        span{display: inline-block;vertical-align: middle;line-height: 22px;}  
    </style>  
      
    <div>  
        <span>测试文字测试文字</span>  
    </div>  
    <div>  
        <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>  
    </div>  

    关键样式:

    ① 父元素(这里是div)设置和高度一致的 line-height (这里是200px)--- 由后面的vertical-align定义看,这是为了设置div的基线

    ② 子元素 (这里是span) 设置合适的line-height,并设置display:inline-block、vertical-align: middle;  --- inline水平的元素无法设置line-height。所以这里要设置inline-block。

    重新审视一下 CSS vertical-align 属性 的定义:

    该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

    由以上需要注意 :

    ① vertical-align属性应该设置到 行内元素上(行内块元素也可)

    ② 如果文字的总高度超出了 容器(这里是div)的高度,那么垂直居中会失效。

    ③ ie7以下 span结束标签和内部内容不能有间隔空白,也就是说span的结束标签和内部内容要连在一起。

    方法二:利用display:table-cell。

    优点:等高布局,无需设置高度,文字轻松实现垂直居中

    缺点:ie7以下不兼容!

    <style>  
        *{padding: 0;margin:0;font-size: 12px;}  
        div{display: table-cell; 200px;border:1px solid blue;vertical-align: middle;}  
    </style>  
      
    <div>  
        <span>测试文字测试文字</span>  
    </div>  
    <div>  
        测试文字测试文字  
    </div>  
    <div>  
        <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>  
    </div>  

  • 相关阅读:
    BestCoder17 1001.Chessboard(hdu 5100) 解题报告
    codeforces 485A.Factory 解题报告
    codeforces 485B Valuable Resources 解题报告
    BestCoder16 1002.Revenge of LIS II(hdu 5087) 解题报告
    codeforces 374A Inna and Pink Pony 解题报告
    codeforces 483B Friends and Presents 解题报告
    BestCoder15 1002.Instruction(hdu 5083) 解题报告
    codeforces 483C.Diverse Permutation 解题报告
    codeforces 483A. Counterexample 解题报告
    NSArray中地内存管理 理解
  • 原文地址:https://www.cnblogs.com/alantao/p/8658220.html
Copyright © 2011-2022 走看看