垂直对齐 div 内的多个图像答案

【问题标题】：Vertically align multiple images within a div垂直对齐 div 内的多个图像
【发布时间】：2016-04-19 00:15:41
【问题描述】：

我正在尝试在 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 小提琴中无效在那里您可以看到图像和顶部边框之间的间隙。

【问题讨论】：

您可以发布您的 HTML 或 JSFiddle 显示您的问题吗？
给我一秒钟我做个小提琴...
您确定这些图像根本没有任何关于它们只会“使”它们看起来偏离中心的东西吗？例如，页面的白色背景上的图像底部的白色背景可能使它看起来很时髦。
我用小提琴更新了我的初始化帖子。
你试过这个资源吗？ phrogz.net/css/vertical-align/index.html

标签： css vertical-alignment

【解决方案1】：

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

我找到了一个很棒的页面 Method for Vertical Centering。

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

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

.parent img {
    vertical-align: middle;
}

Jsfiddle demonstration

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

感谢 Omega，我使用了您的代码并更改了我的示例以使其正常工作：jsfiddle.net/eY7Ms/23
别担心，乐于助人。

【解决方案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

【讨论】：

【解决方案4】：

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

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

【讨论】：