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

Question

我有一个 div，里面有很多 span。 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/