我想垂直对齐两个图像(高度不同但宽度相同)并让它们都适合屏幕。 我可以将它们放在不同的 div 中。 居中与否。没关系。 (他们必须适合屏幕)
我已经在这里阅读了一些关于这个问题的帖子，但没有成功。
我会用 css 解决这个问题，但我也可以使用 javascript 或 jquery。
我们将不胜感激。
示例图像(绘图图像和蓝色带底部):
这里是代码:
<html lang="en">
<head>
<style>
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
background-image: url("http://frisketti.altervista.org/img/sfondo.jpg");
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
footer {
display: block;
min-height: 100px;
background: #ffeebb;
background-image: url("http://frisketti.altervista.org/img/footer.jpg");
}
</style>
</head>
<body>
<div id='main'>
<article></article>
</div>
<footer></footer>
</body>
</html>
最佳答案
属性 vertical-align 不适用于 min-height。它使用高度或填充。
关于css - 获取 2 图像垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19544372/