0

ワードプレスでホームページを作っています。そして、ナビゲーションの下に、image(id="cover_photo_image)のコンテナ(id="cover_photo")があります。余白で中央に配置しますが、下に移動し、コンテナの中央に配置したいのですが、配置するとコンテナが続きますその上にマージン。

HTML 

    <div id="cover_photo">
        <p id="cover_photo_image">
        </p>
    </div>

CSS

#cover_photo {
    width: 100%;
    height: 278px;
    background-color: #6b0c0b;
    box-shadow: inset 0px 0px 3px 0px #888, 0px 0px -3px 0px #888;
}

p#cover_photo_image {
    width: 821px;
    height: 172px;
    display: block;
    margin: 0 auto;
    margin-top: 6px;
    background-image: url(images/cover_photo.png);
}
4

2 に答える 2

1

あなたのコードをフィドルに落とし込み、あなたが何を意味するかを見ました。#cover_photo問題は、またはの配置を設定していないことです#cover_photo_image。外側の要素は相対的である必要があり、内側の要素は絶対的である必要があります。

#cover_photo {
position: relative;
}

p#cover_photo_image {
position: absolute;
}​

プレビューに収まるようにサイズを変更しました。余白の値を調整しようとすると、#cover_photoコンテナは移動せずに移動するはずです。

http://jsfiddle.net/ESCNm/

要素内の要素を自動的に垂直方向および水平方向に整列させたい場合に備えて、手動で配置する方法が他にもたくさんあります。手動での位置決めは非常に面倒なので、可能な限り絶対位置を避けるようにしています。

これに関する記事: http://www.vanseodesign.com/css/vertical-centering/

于 2012-12-02T10:38:18.600 に答える