html - 部門の中央にある画像

Question

私は分割（same width and height）と画像（）を持っていdifferent width and heightます。そのイメージをディビジョンの中心に据えようとしています。だから使う

{ text-align: center}

ここでは、画像が中央になりますが、上の値は変更されません。

ここで、私が正確に必要とするものをイメージします。

ここで私が試したjsfiddleです。アドバイスをお待ちしています。ありがとうございました。

Answer 1

display:table-cell内側の画像をdivの中央に揃えるために使用できます。

しかし、この場合、力が として機能し、技術的にテーブルにマージンを与えるmarginことができないため、与えることはできません。table-celldivtdtd

そのため、白い色で div に境界線を追加しました。

CSS

.background-image{
    width: 150px;
    height: 160px;
    background: #C8BFE7;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
    border:white 5px solid
}
​

デモ

- - - - - - - - - - - - - - - また - - - - - - - - - - ----------------------

各 div に外側の div を追加し、外側の div にマージンを指定できます。

CSS

.outer{margin: 0 0 10px 10px; display:inline-block}
.background-image{
    width: 150px;
    height: 160px;
    background: #C8BFE7;    
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}
​

デモ 2