是否可以使用CSS在div中水平和垂直地居中文本，该div还具有可变大小的图像（应该始终是右对齐的）？
例如，这是为体育联赛表显示的“标题”设置样式--标题基本上由联赛名称（文本）和可选的联赛徽标（图像）组成。图像的宽度和高度可以是可变的，这取决于所使用的徽标图像。
null
.lbo_header_logo {
border: 1px solid #31639C;
float: right;
margin-left: 20px;
vertical-align: middle;
}
.lbo_header_title {
padding: 5px;
background-color: #ddeeff;
border: 1px solid #31639C;
min-width: 550px;
vertical-align: middle;
width: 50%;
}
.lbo_header_name {
color: black;
font-size: 16px;
font-weight: bold;
overflow: hidden;
text-align: center;
vertical-align: middle;
}<html>
<head>
<title>Test!!</title>
</head>
<body>
<div class="lbo_header_title">
<div class="lbo_header_name">League 1<IMG class="lbo_header_logo" src="images/logo1.gif" width="70" height="30"></div>
</div>
<div class="lbo_header_title">
<div class="lbo_header_name">League 2<IMG class="lbo_header_logo" src="images/logo2.gif" width="30" height="70"></div>
</div>
</body>
</html>null
我想我已经设法使文本水平居中（如示例所示），但却在垂直方向上挣扎！
我试过所有的方法，比如线高技巧，但这对我来说都不起作用，因为图像的高度是未知的。
我想我会寻找某种解决方案，使用一个最大值的图像高度，因为最终我想要限制徽标到一个合理的高度/宽度无论如何（即，避免他们上传一个愚蠢的长/宽图像，搞砸了显示！）。
通过使用FlexBox，您可以避免对hacky变通方法的需要。它可以像你想要做的那样，对一些简单的属性进行居中定位。
将容器设置为flex，并使用align-items:center将内容垂直居中。然后对文本进行居中对齐。
文本被包装在div中，该div设置为填充所有可用空间(flex:1 1 auto)，而徽标不允许增长或收缩(flex:none)。
null
.lbo_header_title {
align-items: center;
display: flex;
text-align: center;
/** various existing styles */
padding: 5px;
background-color: #ddeeff;
border: 1px solid #31639C;
min-width: 550px;
width: 50%;
}
.lbo_header_name {
flex: 1 1 auto;
}
.lbo_header_logo {
flex: none;
margin-left: 20px;
}<div class="lbo_header_title">
<div class="lbo_header_name">League 1</div>
<img class="lbo_header_logo" src="https://placehold.it/70x30" width="70" height="30" />
</div>
<div class="lbo_header_title">
<div class="lbo_header_name">League 2</div>
<img class="lbo_header_logo" src="https://placehold.it/30x70" width="30" height="70" />
</div>
