0

現在、イメージ コンテナーを使用しています (以下)。

}
.image_container {
width: 570px;
height: 120px;
margin: 275px auto 0;
}

このコードは div を水平方向に中央揃えにしますが、自動の垂直方向の配置を設定する方法がわかりません。何かアドバイス？

4

3 に答える 3

0

作業する静的な高さがある限り、垂直方向のセンタリングにいくつかの方法を使用できます。

最も簡単なのは、 と を組み合わせることline-heightですvertical-align: middle。

.image_container {
    width: 570px;
    height: 120px;
    margin: 275px auto 0;
    line-height: 120px;
}
.image_container img {
     vertical-align: middle;
}

<div class="image_container">
    <img src="http://jsfiddle.net/img/logo.png" />    
</div>

それを参照してください：http://jsfiddle.net/ka8Hw/1/（注：デモの上部マージンを削除しました）

このline-heightルールは、インライン要素がボックス全体の高さを 1 行として扱うためのちょっとしたハックな方法です。画像は、ボックスの中央を整列する必要がある線として扱います。ただし、画像の下部が中間点に乗るように位置合わせされます。vertical-align:middleそのため、画像の中間点を線の中間点に揃えるように指示するために使用します。

ドキュメンテーション

于 2013-11-13T05:27:04.790 に答える
0

text-align:centerコンテナとline-height:120pxコンテナの高さを設定vertical-align:middleしてから、コンテナに設定する必要がありますimg。

jsフィドル

縦横中央揃えの画像

HTML

<div class="image_container">
    <img src="http://placehold.it/70x70"/>
</div>

CSS

.image_container {
    width: 570px;
    height: 120px;
    margin: 100px auto 0;

    background:green;

    line-height:120px;
    text-align:center;
}

.image_container img{
    vertical-align:middle;
}
于 2013-11-13T05:54:27.967 に答える
-1

これを試して、

.image_container {
    width:400px;
    height: 500px;
    background:#000;
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

http://jsfiddle.net/ka8Hw/3/

于 2013-11-13T05:30:34.547 に答える