HTML + CSS用于居中图像旁边的垂直文本

Question

大家好，请提前帮忙......我正在寻找解决一个简单问题的最佳做法：

.left {
  float: left;
  width: 79%;
  margin-right: 1%;
}
.left img {
  float: right;
}
.right {
  float: right;
  width: 20%;
}

<div class="main">
  <div class="left">
    <img src="http://placehold.it/200x200" />
  </div>
  <div class="right">A TEXT</div>
</div>

我应该如何将文本垂直居中于图像的中间（显然不是在边缘顶部或底部使用px，因为图像的宽度/高度将是dinamic）。 谢谢！

Answer 1

您可以使用flexbox。参见示例：

.main{
   display: flex;
   align-items: center;
}

https://jsfiddle.net/zb2ozq1k/1/

Answer 2

我将摆脱uipanels并使用figures代替。然后，使用float作为文本。

像这样：

table-cell

vertical-align:middle

Answer 3

h1 {
  display: inline;
   vertical-align:top;
}

<div class="middle">
  <img src="http://placekitten.com/200/150" >
   <h1>A TEXT</h1>
</div>