关于HTML让文字垂直居中的方式

最新推荐文章于 2024-09-16 09:20:49 发布

weixin_34128237

最新推荐文章于 2024-09-16 09:20:49 发布

阅读量825

点赞数

文章标签： python

原文链接：https://my.oschina.net/997155658/blog/119684

版权

2019独角兽企业重金招聘Python工程师标准>>>

第一种方式：

使用vertical-align属性,但是vertical-align属性只会对拥有valign特性的(X)HTML标签起作用（例如：td,th,caption），但是在CSS中还有一个display属性能够模拟<table>。但是Internet Explorer 6及以下版本并不能真正理解displaydisplay:table和display:table-cell，所以此例子只使用于IE6以上的版本

注意：display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上

Demo：

<!Doctype html>
<html lang="zh-cn">
<head>
  <title>我是垂直居中</title>
  <meta charset="utf-8" />
  <script></script>
  <style>
   .con {
    width: 100%;
    height: 300px;
    background: pink;
    display: table;
   }

   .txt {
    vertical-align: middle;
    display: table-cell;
   }
  </style>
</head>
<body>
  <div class="con">
   <div class="txt">我要垂直居中</div>
  </div>
</body>
</html>

转载于:https://my.oschina.net/997155658/blog/119684