你的位置:首页 > 网页设计

[网页设计]关于文字垂直居中


很多时候布局中需要文字垂直居中,有个CSS属性:vertical-align: middle;该属性在table里用是有效果的,很多块级元素没反应。
这里有2个属性可以模拟table,来让vertical-align: middle属性生效。

display: table和display: table-cell;

很简单父级元素给固定宽高加上属性display: table,子级元素给属性display: table-cell和vertical-align: middle此时子集元素的文字自然垂直居中。

<!doctype html><html lang="en"><head>  <meta charset="UTF-8">  <title>display:table</title>  <style>    *{      margin: 0;      padding: 0;    }    .main{      display: table;      width: 100px;      height: 100px;      border: 1px solid red;    }    .d1{      display: table-cell;      vertical-align: middle;    }    .d1 h3{      text-align: center;    }  </style></head><body>    <div class="main">      <div class="d1">        <h3>垂直居中</h3>      </div>    </div></body></html>