關於HTML讓文字垂直居中的方式

時間 2019-11-06

標籤關於 html 文字垂直居中方式欄目 HTML 简体版

原文原文鏈接

第一種方式： html

使用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的使用方法，前者必須設置在父元素上，後者必須設置在子元素上 htm

Demo： ip

<!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;
   } utf-8

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

相關標籤/搜索