我是一名新手html / CSS程序员，需要满足一系列非常具体的情况。 我有2张图像，两者都必须垂直对齐图像的中心。一个图像必须左对齐，另一个图像必须右对齐。他们将处于最大宽度div，但我不认为这应该是一个问题。当网页缩小到两张图片的宽度以下时，图像需要水平居中，一张图像在另一张图像的顶部。我已经添加了照片到clarfiy（对不起，我会添加作为图片，但我有零代表）。 div容器和图像都是可变的，因此基于像素的定位是不可能的。
所以我研究了这一点，但我发现的所有答案都是偏袒的;不能做我正在寻找的一切。有什么想法吗？
（http://imageshack.us/a/img819/9515/3zt.gif）
（http://imageshack.us/a/img14/853/qp8.gif）
研究：
我注意到我的问题是-1。我想不提供我的研究是错误的？以下是我尝试解决此问题的一些方法：
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?
答案 0 :(得分：0)
编辑＃2
另一个版本，我认为这是我能想到的最干净的版本
live view
edit view
对宽屏幕视图使用css表和vertical-align：middle，然后折叠表以获取窄视口。代码很干净，完全独立于图像高度。
=====
修改
正如@ user2748350正确指出的那样，如果图像高度不同，我在下面的原始建议并没有在宽屏幕上垂直对齐图像。
这是一种变体，它是使用vertical-align：中间和内嵌图像的改进。唯一的要求是您将线高设置为大于最高的图像：
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">
可在移动设备上良好显示。
希望这有帮助！
答案 1 :(得分：0)
这是快速解决方案
img {
max-height: 100%;
max-width: 90%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}