在任何浏览器中，在同一水平线上垂直对齐公共div内的中心图像和标签

Question

我的页面中有以下html代码：

<div class="container"> (Can't have static height)
<img></img> (Has variable height)
<label></label> (Has variable length)
</div>

我想在任何浏览器中垂直应用的同一行中对齐它们。如果按照标准方式可以，我应该如何工作？我搜索并阅读了很多文章来解决这个问题，但都没有成功。

编辑：本例中的"容器"div不是页面中的主容器div，它上面还有3个其他父级，它们对它的位置没有影响。

Answer 1

您可以使用flex，方法是使用flex:1在之前添加：，在之后添加:，这将使图像/文本始终位于中心。然后你可以再次对图像和文本使用flex，使它们在同一行对齐，如下所示：

转到整页以更好地查看结果

* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
.page {
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
}
.page:before,
.page:after {
content: " ";
flex: 1;
}
.container {
display: flex;
align-items: center;
}
label {
padding: 5px;
}

<div class="page">
<div class="container">
<img src="https://lorempixel.com/200/200/">
<label>text</label>
</div>
</div>

Answer 2

您可以使用text-align、display和line-height，如下所示：

<style>
.container{
text-align: center;
}
.container label{
display: block;      
line-height: 0; /*To stick the label under the bottom edge of the image*/
}
.container img{
display: inline-block;
}
</style>

检查此DEMO