2

私の問題は次のとおりです。

divを垂直方向の中央に配置しました。ただし、別のdivを水平方向に中央に配置したいと思います。問題は、それを水平方向に中央に配置できないことです。

これが私の（X）HTMLとCSSです

（X）HTML：

<body>
<div id="strut"></div>
<div id="page">
    <div id="inner_page">
        <h1>Galidie "jQzz" Clément</h1>
    </div>
</div>

CSS：

html, body {
margin: 0;
padding: 0;
height: 100%;
}

#strut, #page {
    display: inline-block;
    vertical-align: middle;
}

#strut {
    height: 100%;
}

#page {
    border: 1px solid #c00;
}

#inner_page {
    width: 750px;
    margin: 0 auto;
    background-color: #c00;
}

h1 {
    text-align: center;
    margin: 0;
}

支柱は、要素を垂直方向に中央に配置するためのマーカーです。ページは垂直方向の中央に配置されます。アイデアは、inner_pageブロックを水平方向に中央に配置しようとすることです。

絶対位置を使用する必要がありますか？または他に何か？私は良い方法を選びましたか？

4

1 に答える 1

0

#pageはインライン ブロックであるため、常にその子の次元を使用します。この場合、その唯一の子は#inner_pageで、これは 750px であるため、両方とも同じサイズになります。これは、実際には の中央に配置できないことを意味します#page。

たとえば、着用することでそれ自体を中心#pageに置くことができます。text-align: centerbody

于 2012-10-19T22:58:52.700 に答える