Css 如何对齐照片和文本

我怎样才能在一个单词中插入一张新的照片，它是一个引号，所以我试着做一些类似的事情

“从远处看，一切似乎都很完美”

但这就是它的样子

有没有一种方法可以将最后的引号对齐

<p>
  <em>
   <img src="images/quotes-1.jpg" width="45" height="35" style="float:left" alt="quotations"/>  
   Everything seems perfect from far away
   <img src="images/quotes-2.jpg" width="45" height="35" style="float:right" alt="quotations"/>
  </em>
</p>

从远处看，一切似乎都很完美

移除

浮动：左和<代码>浮动：右侧。然后添加
行高：35px
到
em
尝试用内联块div包围它

<div style="display:inline-block">
    <p>
      <em>
          <img src="images/quotes-1.jpg" width="45" height="35" style="float:left" alt="quotations"/>  
          Everything seems perfect from far away
          <img src="images/quotes-2.jpg" width="45" height="35" style="float:right" alt="quotations"/>
      </em>
   </p>
</div>



从远处看，一切似乎都很完美

您应该删除属性float

<p>
  <em>
   <img src="images/quotes-1.jpg" width="45" height="35"  alt="quotations"/>  
   Everything seems perfect from far away
   <img src="images/quotes-2.jpg" width="45" height="35"  alt="quotations"/>
  </em>
</p>


从远处看，一切似乎都很完美

要使其看起来像这样，您需要删除
浮动：左
和
浮动：右
，然后给图像
垂直对齐：中间

（请原谅演示中损坏的图像，因为您没有提供问题。）

工作现场演示：


em>img{
垂直对齐：中间对齐；
}

从远处看，一切似乎都很完美
移除浮动


从远处看，一切似乎都很完美

移除
浮动：左和<代码>浮动：右侧。图像是，因此，通过向图像添加
display:inline
，除了添加不需要的CSS之外，您没有完成任何事情。重要的部分，也是这个解决方案有效的原因，是浮子被移除了。
        <p>
            <em>
                <img src="images/quotes-1.jpg" width="45" height="35" alt="quotations"/>  
                Everything seems perfect from far away
                <img src="images/quotes-2.jpg" width="45" height="35" alt="quotations"/>
            </em>
        </p>