Question

我正在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>

Answer 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>

垂直居中：enter link description here

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

1 个答案: