zoukankan      html  css  js  c++  java
  • 利用table-cell实现元素居中对齐

    vertical-align对一些特定显示样式(例如单元格显示方式:table-cell)的元素才会起作用。所以要实现上下垂直居中对齐,可以采用如下样式

    display:table-cell;      /*按照单元格的样式显示元素*/
    vertical-align:middle;   /*垂直居中对齐*/
    • 上面的设置方式相比设置line-height属性,可以兼容文字有多行的情形。

    下面举例说明:

    1. 创建Html元素

      <div>
      <span>测试测试,即便是多行,我也还是垂直居中对齐的。</span>
      </div>
    2. 设置css样式

      div{ 200px; height:115px; border:4px solid #ebcbbe; display:table-cell;vertical-align: middle;
    3. 观察显示效果

  • 相关阅读:
    closure
    运算符优先级
    css妙用
    BFC (块级格式化上下文)
    display:table-cell 详解
    line-height深入理解
    margin collapse
    探究 CSS 解析原理
    python入门
    spring与线程安全
  • 原文地址:https://www.cnblogs.com/winkey4986/p/4718214.html
Copyright © 2011-2022 走看看