這是一個很好的起點。

HTML：

CSS：

.containing-table {

display: table;

width: 100%;

height: 400px; /* for demo only */

border: 1px dotted blue;

}

.centre-align {

padding: 10px;

border: 1px dashed gray;

display: table-cell;

text-align: center;

vertical-align: middle;

}

.content {

width: 50px;

height: 50px;

background-color: red;

display: inline-block;

vertical-align: top; /* Removes the extra white space below the baseline */

}

.containing-table為.centre-align(表格單元格)建立寬度和高度上下文。

您可以根據需要應用text-align和vertical-align來改變.centre-align。

請注意，.content需要使用display：inline-block，如果要使用text-align屬性水平居中。

總結

以上是生活随笔為你收集整理的html中表格与字对齐,html – 中心与表格单元格对齐的全部內容，希望文章能夠幫你解決所遇到的問題。

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