响应式设计图像对齐

Question

我是一个新手 html/CSS 程序员，需要满足一组非常特定的情况。 我有 2 张图像，两者都必须垂直对齐图像的中心。一张图片必须左对齐，另一张图片必须右对齐。它们将位于最大宽度的 div 中，但我认为这不应该是一个问题。由于网页缩小到低于两张图片的宽度，因此图片需要水平居中，一张图片放在另一张图片的顶部。我已将图片添加到 clarfiy（对不起，我会添加为图片，但我的代表为零）。 div 容器和图像都是可变的，因此基于像素的定位是不可能的。

所以我对此进行了大量研究，但我找到的所有答案都是片面的；无法做我正在寻找的一切。有什么想法吗？

(http://imageshack.us/a/img819/9515/3zt.gif)

(http://imageshack.us/a/img14/853/qp8.gif)

研究：
我注意到我的问题是-1'd。我想不提供我的研究是错误的吗？以下是我尝试解决此问题的一些方法： Vertical alignment of elements in a div

How to vertically align an image inside div

How to vertically middle-align floating elements of unknown heights?

Wrap long HTML tables to next line

Answer 1

这里是快速解决方案

 img {
        max-height: 100%;
        max-width: 90%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

Answer 2

编辑#2

另一个版本，我觉得这是我能想到的最干净的了
live view
edit view
对宽屏视图使用 css 表格和垂直对齐：中间，然后为窄视口折叠表格。代码很干净，完全独立于图像高度。

=================

编辑

正如@user2748350 正确指出的那样，如果图像高度不同，我在下面的原始建议不会在宽屏幕上垂直对齐图像。

这是一个变体，它是使用垂直对齐的改进：中间和内嵌图像。唯一的要求是您设置的行高大于最高图像：
live view
edit view

================================================
原创

看看这对你有没有帮助：
live view
edit view

HTML

<div class="container">
<img src="http://placehold.it/300x150" class="left">
<img src="http://placehold.it/250x150" class="right">
</div>  

CSS

.container{
margin: 0 auto;
max-width:1000px;
}
img.left{
display:block;
float:left;
}
img.right{
display:block;
float:right;
}

@media (max-width: 570px) {
img.left{
float:none;
margin: 0 auto;
}
img.right{
display:block;
float:none;
margin: 0 auto;
}
}  

在你的页面头部，你还想添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在移动设备上显示良好。

希望这会有所帮助！