在div中垂直对齐多个图像

Question

我正在尝试垂直对齐/居中div中的一些图像。它不是100%正确的。图像的像素太低，不能垂直居中。为什么会这样呢？

.Container
{   
    width:280px;
    position:fixed;
    border:1px solid blue;
    left:0px;
    text-align: center;
    line-height:84px;
}

.Container input[type=image]
{
   vertical-align:middle;
}

更新：

http://jsfiddle.net/2j531q32/

更新2:图像在js小提琴中是无效的，你可以看到图像和上边框之间的间隙。

Answer 1

不需要任何线高的css。您可以使用display:table和display:table-cell样式垂直对齐div。.ButtonBarDiv的高度被夸大了，以显示它们都垂直居中。

每行一张图片：http://jsfiddle.net/eY7Ms/16/

同一行的图片：http://jsfiddle.net/eY7Ms/14/

Answer 2

在IE11中，被接受的解决方案对我不起作用。

我发现了一个很棒的Method for Vertical Centering页面。

这对我来说适用于Chrome和IE11，行高需要大于居中的最高元素。

#Parent{
    line-height: 200px; // > the highest element to be centered.
}

.parent img {
    vertical-align: middle;
}

Jsfiddle demonstration

Answer 3

经过一些研究，我发现了另一个关于stackoverflow的问题：Image inside div has extra space below the image

浏览器似乎会在一行的上方/下方渲染额外的空间，因此您可能想要调整行的高度，下面是一个示例：

http://jsfiddle.net/eY7Ms/13/

所以如果你想调整垂直的额外空间，你可以这样做：

.boxWithVerticalCenteredContent {
    height: 4em;
    line-height: 3.6em;
}

我知道，这不是完全居中，高度是固定的，但如果你想绝对居中，你可能会想要使用position: absolute和top, bottom, left, right