Question

我有一个div，里面有很多跨度。 div相当大，跨度不会填满。我希望跨度如此对齐，以使得到的文本看起来位于div区域的中心 - 垂直和水平。我不想每次必须设置它时计算像素数。我能够在中心垂直对齐它们，但不能水平对齐。

<div class="Container">
    <div class="InnerContainer">
        <b><span class="large">Hi</span><span class="normal">How're you doing</span>
        <br/>
        <span style="font-family: Arial; font-size: medium">Answer Here</span>
    </div>
</div>

.Container {
            /*Set surroundings of the div*/
            padding: 0;

            /* Set size of the div */
            width: 400px;
            height: 350px;

            /* Set position of the div */
            position: relative;
            margin: 0 auto;
            margin-left: -200px;
            margin-top: -175px;
            left: 50%;
            top: 50%;

            align-content: center;
            vertical-align: middle;
        }

        .InnerContainer{
            /*Set surroundings of the div*/
            padding: 0;

            /* Set size of the div */
            width: 400px;
            height: 350px;

            /* Set position of the div */
            position: relative;
            margin: 0 auto;
            margin-left: -250px;
            margin-top: -175px;
            left: 50%;
            top: 50%;

            /*align-content: center;*/
            vertical-align: middle;

            display: table-cell;
        }

Answer 1

您应该将display:table-cell添加到.Container并将display:inline-block添加到.InnerContainer（因为除非指定了宽度，否则div会占用所有可用的水平空间。）

而不是将text-align:center; vertical-align:middle;添加到.Container。

像这样：http://jsfiddle.net/fd5rV/

Answer 2

您应该使用“ display：table-cell”和“ vertical-align：middle;”到父组件。并且不要设置子组件的大小。这样做：

.Container {
    background-color: green;
    width: 400px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    display:table-cell;
}

.InnerContainer{
    background-color: blue;
    display: inline-block; /*just to wrap content*/
}

<div class="Container">
    <div class="InnerContainer">
    <b><span class="large">Hi</span><span class="normal">How're you doing</span>
    <br/>
    <span style="font-family: Arial; font-size: medium">Answer Here</span>
    </div>
</div>

您不需要两个容器，只需一个即可完成。这样做：

.Container {
    background-color: green;
    width: 400px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    display:table-cell;
}

<div class="Container">
    <b><span class="large">Hi</span><span class="normal">How're you doing</span>
    <br/>
    <span style="font-family: Arial; font-size: medium">Answer Here</span>
</div>

在中心和中间的div内对齐跨度

2 个答案: