1

私はワードプレスを使用して画像を動的に表示しています。各画像の幅は186ピクセルに固定されており、画像の比率に応じて高さが変化します。各画像は、15ピクセルのパディングが付いた正方形のボックスに配置されます。デフォルトでは、画像はボックスの上部に表示されます。幅は固定されていますが、高さが可変であるため、画像を垂直方向に中央に配置する方法を探しています。これが私のコードです：

HTML：

<div class="logoContainer">
    <img src="/path/to/image.jpg" />
</div>

CSS：

.logoContainer {
    padding: 15px;
    background: #dddddc;
    margin-bottom: 10px;
    width: 186px;
    height: 186px;
}
.logoContainer img {
    max-width: 100%;
    height: auto;
}

絶対測位を使用することもできますが、画像の正確な高さがわからないと、完全に中央に配置するのは困難です。しかし、私たちはコンテナボックスの正確な寸法を知っています。考え？

4

2 に答える 2

3

これを試してください-http://jsfiddle.net/vLbRF/

.logoContainer {
    padding:15px;
    background:#dddddc;
    margin-bottom: 10px;
    width:186px;
    height:186px;
    line-height: 186px;
}

.logoContainer img {
    max-width: 100%;
    vertical-align: middle;
}
于 2012-06-29T18:43:29.483 に答える
0

実装するこの手法を使用するvertical-alignと、動的な高さのコンテナーを作成できます。

<div class="logoContainer">
    <span></span><img src="/path/to/image.jpg" />
</div>

CSS：

.logoContainer {
    padding:15px; 
    background:#dddddc; 
    margin-bottom: 10px; 
    width:186px; 
    height:186px; }
span {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
.logoContainer img { 
    vertical-align: middle;
    display: inline-block; }
于 2012-06-29T18:38:41.547 に答える