html – 中心与表格单元格对齐

发布时间：2020-12-14 21:24:52 所属栏目：资源来源：网络整理

导读：我正在尝试使用table-cell方式垂直和水平居中div。它在我使用以下代码时有效： div { display: table;}.logo { display: table-cell; position: absolute; vertical-align: middle; left: 0; right: 0; bottom: 0; top: 0; margin: auto;} 但我宁愿将.logo

我正在尝试使用table-cell方式垂直和水平居中div。

它在我使用以下代码时有效：

div {
    display: table;
}
.logo {
    display: table-cell;
    position: absolute;
    vertical-align: middle;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

但我宁愿将.logo包装在另一个名为.center的div中，就像这里JSFiddle一样，但出于某种原因，尽管它在JSFiddle中有效，但它在我的网站上并不适合我。

解决方法

这是一个很好的起点。

HTML：

<div class="containing-table">
    <div class="centre-align">
        <div class="content"></div>
    </div>
</div>

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 */
}

请参阅演示：http://jsfiddle.net/audetwebdesign/jSVyY/

.containing-table为.centre-align(表格单元格)建立宽度和高度上下文。

您可以根据需要应用text-align和vertical-align来改变.centre-align。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!