html實現文字垂直居中且設置間隔

時間 2019-11-08

標籤 html 實現文字垂直居中設置間隔欄目 HTML 简体版

原文原文鏈接

使用table和table-call佈局html

將表格做爲一個table表，使用table-cell定義每一個單元格的佈局爲table-cell,佈局

拋出display的有效值ui

單元格中間的間隔使用spa

border-spacing:10px;
border-collapse: separate;

定義單元格

vertical-align: middle;
display: table-cell;

代碼源碼htm

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<style>
   .block{
      display: table;
      border-spacing:10px;
      border-collapse: separate;
   }
   .box {
      margin: 10px;
      border: 1px solid #f00;
      background-color: #eee;
      width: 33%;
      height: 400px;
      vertical-align: middle;
      display: table-cell;
   }

   .text {}
</style>

<body>
   <div class="block">
      <div class="box">

         <div class="text">
   
            我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字
   
         </div>
   
      </div>
      <div class="box">
   
         <div class="text">
   
            我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字
   
         </div>
   
      </div>
      <div class="box">
   
         <div class="text">
   
            我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字
   
         </div>
   
      </div>
   </div>
</body>

</html>

　　效果以下blog

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。