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,因为图像的宽度/高度将是动态的).谢谢!

Answer 1

你可以使用flexbox.看例子:

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