0

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

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

（http://imageshack.us/a/img819/9515/3zt.gif）

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

研究：
我注意到我的问题是-1'd。我想不提供我的研究是错误的吗？以下是我尝试解决此问题的一些方法： div 中元素的垂直对齐

如何垂直对齐div内的图像

如何垂直居中对齐未知高度的浮动元素？

将长 HTML 表格包装到下一行

4

2 回答 2

0

编辑#2

另一个版本，我认为这是我能想到的最干净的
实时视图
编辑视图
使用 css 表和垂直对齐：中间为宽屏幕视图，然后折叠表以用于窄视口。代码很干净，完全独立于图像高度。

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

编辑

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

这是一个变体，它是使用垂直对齐的改进：中间和内联图像。唯一的要求是您设置的行高大于最高图像：
实时视图
编辑视图

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

看看这是否对您有帮助：
实时视图
编辑视图

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">

在移动设备上获得良好的显示效果。

希望这可以帮助！

于 2013-09-05T00:07:23.323 回答
0

这是快速解决方案

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

于 2021-02-16T05:39:51.927 回答