在中心和中間的div內對齊跨度

Question

我有一個股利，里面有很多跨度。 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; 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>