在图像旁边的中心垂直对齐文本答案

【问题标题】：Vertically align text in center next to image在图像旁边的中心垂直对齐文本
【发布时间】：2019-01-04 18:50:28
【问题描述】：

我正在 invisionbilling.com 上构建我妻子的商业网站，但在将文本与中心图像对齐时遇到了困难。这似乎是一个非常简单的概念，但我就是无法让它发挥作用。我的html有什么问题？

<span style="font-size: 24pt; line-height: 40px; display: inline-block;">
    <img src="http://invisionbilling.com/wp-content/uploads/2018/07/Home-Photo-1-300x180.jpg" alt="" width="500" height="299" class="alignnone size-medium wp-image-106" style="float: right; margin-left: 25px; vertical-align: middle;" />InVision Billing Solutions specializes in medical 
    practices maximizing their revenue through accurate claim 
    submission and prompt payment posting.</span>

【问题讨论】：

图片旁边是左边...右边..顶部还是底部？
在这种情况下，文本位于图像的左侧。

标签： html image vertical-alignment

【解决方案1】：

Flexbox，以及您通过一些调整所获得的效果...

<div style="width:100%;margin:auto;">
  <div style="float:left; width:50%;position:relative;">
     <div style="display: flex; align-items: center; justify-content: center;height:299px">
      InVision Billing Solutions specializes in medical 
      practices maximizing their revenue through accurate claim 
      submission and prompt payment posting.
     </div>
  </div>
  <div>
      <img src="http://invisionbilling.com/wp-content/uploads/2018/07/Home-Photo-1-300x180.jpg" alt="" width="500" height="299" style="float: right; width:50%;" />
  </div>
</div>

垂直居中：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

【讨论】：