星空网 > 软件开发 > 网页设计

关于文字垂直居中

很多时候布局中需要文字垂直居中,有个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>

 




原标题:关于文字垂直居中

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流