html - 框中的 HTML+CSS 文本

Question

我遇到了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>

Answer 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>

Answer 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>

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

Answer 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>