使用table和table-call布局

將表格作為一個table表，使用table-cell定義每個單元格的布局為table-cell,

拋出display的有效值

單元格中間的間隔使用

border-spacing:10px;

border-collapse: separate;

定義單元格

vertical-align: middle;

display: table-cell;

代碼源碼

Document

.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 {}

我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字

我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字

我是多行文字我是多行文字是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是多行文字我是>多行文字我是多行文字

效果如下

總結

以上是生活随笔為你收集整理的html字体垂直间隔,html实现文字垂直居中且设置间隔的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。