13

固定サイズの正方形のdivがあり、CSSを使用して、水平方向と垂直方向の両方の中央に配置されるように、任意のサイズの画像を内部に配置したいと考えています。水平方向は簡単です：

.container { text-align: center }

垂直方向の場合、一般的な解決策は次のとおりです。

.container {
    height: 50px;
    line-height: 50px;
}
img {
    vertical-align: middle;
}

ただし、これは完全ではありません。フォントサイズによっては、画像が2〜4ピクセル下になりすぎます。

私の理解では、これは、垂直整列に使用される「中央」が実際には中央ではなく、中央に近いフォント上の特定の位置であるためです。（少しハッキーな）回避策は次のようになります。

container {
    font-size: 0;
}

これはChromeとIE7で機能しますが、IE8では機能しません。真ん中のすべてのフォント行を同じポイントにすることを望んでいますが、ブラウザや、おそらく使用するフォントによっては、行き当たりばったりのようです。

私が考えることができる唯一の解決策は、線の高さをハックして少し短くし、画像を正しい場所に表示することですが、非常に壊れやすいようです。より良い解決策はありますか？

ここで3つのソリューションすべてのデモを参照してください：http： //jsfiddle.net/usvrj/3/

IE8をお持ちでない方は、このスクリーンショットが役立つかもしれません。

font-sizeが0に設定されている場合のIE8スクリーンショット

4

5 に答える 5

2

css3 がオプションの場合、flexbox は垂直方向と水平方向の位置合わせでうまく機能します。

更新されたフィドル 

.container {
    display:flex;
    align-items: center; /* align vertical */
    justify-content: center; /* align horizontal */
}
于 2014-05-13T11:16:54.010 に答える
2

あなたの画像を背景として使用してみませんか？このようにして、どこでも一貫して中央に配置できます。これらの行に沿ったもの：

margin:5px;
padding:0;
background:url(http://dummyimage.com/50) no-repeat center center red;
height:60px;
width:60px;
于 2012-05-10T21:29:45.090 に答える
1

これは本当にハックですが、ie6 の時代に私たちが行っていたことです。

.container {
     position: relative;
}
img {
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -12px; // half of whatever the image's height is, assuming 24px
     margin-left: -12px; // half of whatever the image's width is, assuming 24px
}

この例では何かが欠けているかもしれませんが、お分かりいただけたでしょうか。

于 2012-05-09T21:33:58.750 に答える
0

次のことを試しましたか。

img {
    display: block;
    line-height: 0;
}

私は通常このハックを使用しますが、IE8 で十分にチェックしたことはありません。

于 2012-05-08T14:24:59.823 に答える