html - 画像の配置の問題

Question

幅と高さの異なるさまざまなブランド イメージを使用しました。画像を水平方向と垂直方向の中央に表示したい。次の Fiddle を参照してください。

http://jsfiddle.net/FXQhv/

Answer 1

DIVline-heightと同じようheightに与えます。このように書いてください：

.ngg-gallery-thumbnail-box {
    float: left;
    line-height: 100px;
}

これをチェックしてくださいhttp://jsfiddle.net/FXQhv/1/

Answer 2

行の高さを定義するのを忘れたようです。そのため、cssに行の高さを追加する必要があります。

    .ngg-gallery-thumbnail {
    border: 1px solid #CCCCCC;
    display: inline;
    float: left;
    height: 100px;
    margin-bottom: 5px;
    margin-left: 5px;
    text-align: center;
    width: 120px;
    line-height:100px;
}

デモ： -http： //jsfiddle.net/FXQhv/3/

ボックス内の画像の中央揃え（水平方向および垂直方向）についての詳細を読む

Answer 3

以下を追加

.ngg-gallery-thumbnail-box a { display:table-cell; width:120px; height:100px; vertical-align:middle; }