框中的 HTML+CSS 文本答案

【问题标题】：HTML+CSS Text in a Box框中的 HTML+CSS 文本
【发布时间】：2014-12-04 19:03:15
【问题描述】：

我遇到了 css 和 html 的问题。我需要在框中的文本居中。当我放置文本时，所有框都在底部。这是我的代码

.box {
    width: 100px;
    height: 100px;
    background: #cce;
    display: inline-block;
    margin-left: 10px;
}

<div id="3box">
    <div class="box">
        <p>Title</p>
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
</div>

【问题讨论】：

标签： html css alignment center box

【解决方案1】：

像这样将vertical-align: top; 和text-align: center; 添加到.box：

.box {
    width: 100px;
    height: 100px;
    background: #cce;
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
    text-align: center;
}

<div id="3box">
    <div class="box">
        <p>Title</p>
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
</div>

【讨论】：

【解决方案2】：

要使文本垂直和水平居中并且不想关心文本长度，您可以使用表格 - 表格单元格方法来做到这一点

.box {
        width: 100px;
        height: 100px;
        background: #cce;
        float: left;
        margin-left: 10px;
        display: table;
    }

.box p {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
  }

 <div id="3box">
        <div class="box">
            <p>Title</p>
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
    </div>

这也提供了很好的浏览器支持。

【讨论】：

【解决方案3】：

要使块中的文本居中，请添加text-align: center;

.box {
    width: 100px;
    height: 100px;
    text-align: center;
    vertical-align: top;
    background: #cce;
    display: inline-block;
    margin-left: 10px;
}

<div id="3box">
    <div class="box">
        <p>Title</p>
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
</div>

【讨论】：