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