css - 垂直对齐 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

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

我找到了一个很棒的垂直居中方法页面。

这在 Chrome 和 IE11 中对我有用。 line-height 需要 > 要居中的最高元素。

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

.parent img {
    vertical-align: middle;
}

Jsfiddle 演示

Answer 2

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

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

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

Answer 3

经过一些研究，我在stackoverflow上发现了另一个问题： div内的图像在图像下方有额外的空间

似乎浏览器在一行上方/下方呈现了一个额外的空间，因此您可能想要调整行高，这是一个示例：

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

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

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

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

Answer 4

仅适用于现代浏览器，但：

.elementToAlign{
position: relative;
top: 50%;
transform : translateY(-50%);
}