0

a<div>を別の a に配置して、中央に配置したい。私のやり方はこれです：

<div id="redthing">
<div id="whitebox" >
</div>
</div>

.css - コードは次のとおりです。

#redthing {
margin-top: 2px;
background-color: #f00d28;
height: 250px;
}

#whitebox {
 margin: 0 auto;
 margin-top: 10px;
 padding-top: 20px;
 height: 10px;
 width: 400px;
 background-color: white;
 border:5px solid #000;
}

ご覧のとおり、ページの中央にパディングとマージンが機能しません（つまり、whiteboxと の上下の間に同じ場所があることを意味しredboxます。助けてください

4

1 に答える 1

4

さて、あなたが持っているものを見てみましょう。この図の各行は、高さ 10px を表しています。

┏━━━━━━━━━━━━━━━━━━━━━┓
┃10px margin top        ┃
┃┌─────────────────────┐┃
┃│20px padding top     │┃
┃│padding continues    │┃
┃│10px height          │┃
┃└─────────────────────┘┃
┃                       ┃
┊  lots of empty space  ┊
┃                       ┃
┗━━━━━━━━━━━━━━━━━━━━━┛

それがどのように機能するのか説明してください。

パディングとマージンが正しい量になるようにするか、これを使用する必要があります。

/* add this to the container */
position: relative;

/* add this to the inner box */
position: absolute;
top: 50%;
margin-top: -Xpx;
/* where X is half the offsetHeight of the box - ie. (height+padding+border)/2 */
于 2012-07-22T17:14:34.837 に答える