2

ここに問題があります。さまざまなサイズの画像がありますが、幅は常に高さよりも大きく、すべての画像のサイズが 100px 幅に変更されるため、実際には問題ではありません (高さは各画像で異なります)。

100px x 100px の div 内の画像を垂直方向に揃えようとしています。ありとあらゆることを試しました。line-height、margin's auto、table cell メソッドはすべて機能しません...

html は次のとおりです。

<div class="kassabon_product_image">
<img src="product1.png" />
</div>

そしてここにCSSがあります

.kassabon_product_image{
float: left;
display:table-cell;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
vertical-align:middle;
}

.kassabon_product_image img{
width: 100px;
}
4

2 に答える 2

3 
.kassabon_product_image{
    display:table-cell;
    vertical-align:middle;
}

img から vertical-align を削除すると、うまくいくはずです。

于 2012-10-31T17:16:32.887 に答える
1

コメントを見る

.kassabon_product_image{
float: left;
text-align: center; /*using text-align:center in the outer div will center all elements inside the div*/
display:inline-block;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
}

.kassabon_product_image img{
width: 100px;
/*vertical-align:middle;*/ /*this is the wrong place to align*/
}
于 2012-10-31T17:15:04.113 に答える