html - 图像对齐问题

Question

我使用了不同宽度和高度的不同品牌图像。我想以水平和垂直居中显示图像。请看下面的小提琴。

http://jsfiddle.net/FXQhv/

Answer 1

Give与 DIVline-height相同height。像这样写：

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

检查这个http://jsfiddle.net/FXQhv/1/

Answer 2

看来你忘了定义 line-height 所以现在你只需要在你的 css 中添加 line-height ：

    .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; }