0

中央揃えの内側 DIV を垂直方向に揃えようとすると、中央揃えが機能しません...

ここで私の問題は何ですか？

CSS コード:

#page_bar
{
    width: 100%;
    height: 30px;
    background-color: white
}

.page_bar
{
    width: 800px;
    height: 30px;
    display: table-cell;
    vertical-align: middle
}

HTML コード:

<div id="page_bar">
    <div class="page_bar">
        Mapa Strony
    </div>
</div>

編集:内側のDIVのテキストではなく、内側のDIVを中央に配置したい...

編集: 見てください: http://mistic-miners.comule.com/index.htmlシルバー エリアを中央に配置する必要があります。つまり、内部 div 内のテキストではなく、内部 div を中央に配置する必要があります。

4

5 に答える 5

1

私はこの問題を抱えていましたが、時間を無駄にして時間を無駄にした後、明らかな簡単な修正を最終的に見つけました。

elementに適用する場合'display:table-cell'は、parentに適用します。これにより、垂直方向の配置が期待どおりに機能します。'display:table'

于 2014-10-07T07:49:29.843 に答える
1

これは、垂直方向と水平方向の中央に配置されます。

#page_bar
{
    width: 100%;
    height: 100px;
    background-color: black;
    text-align: center;
}

.page_bar
{
    width: 800px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    color: white;
}​

jsfiddle: http://jsfiddle.net/DgwwB/2/

于 2012-08-18T07:00:38.040 に答える
1

text-align:center;に追加する場合は#page_bar？

于 2012-08-18T07:00:40.900 に答える
1

垂直整列: 中央

「;」を忘れたと思います これについて。また、2~3px のスペース 30-27 または 33-30 を与える

于 2012-08-18T07:03:40.363 に答える
1

テーブルセル表示で水平方向に中央に配置するには、.page_bar クラスをラップする必要があるようです。 

#wrap{
    margin: 0px auto;
    display:table;
}

#page_bar
{
    width: 100%;
    height: 30px;
    background-color: white
}

.page_bar
{
    width: 800px;
    height: 30px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    margin: 0px auto;
}

<div id="page_bar">
    <div id="wrap">
        <div class="page_bar">
            Mapa Strony
        </div>
    </div>
</div>
于 2012-08-18T07:11:47.927 に答える