如何对齐位于 div 内的两个跨度的顶部？答案

【问题标题】：how to align the tops of two spans located inside of a div?如何对齐位于 div 内的两个跨度的顶部？
【发布时间】：2020-02-13 01:02:30
【问题描述】：

我正在尝试使猫图片的顶部与下图中看到的文本顶部垂直对齐：

如您所见，文字低于图片。

这里是 CSS 和 HTML：

<div>
  <span style="vertical-align: top; width: 5%; float: left"><img width="80px" src="./5 Bilder_Logos/cat.jpeg"/></span>
  <span style='vertical-align: top; width: 95%; float: right;font-size:10.0pt;font-family:"Arial","sans-serif";color:black'><o:p>&nbsp;</o:p></span></p>
  <p class=EinfAbs style='margin-top:5.65pt'><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'>AWARD WINNER 2019 </span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:red;letter-spacing:.4pt'>(14 pt Arial Bold)</span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'><o:p></o:p></span></b></p>
  <p class=MsoNormal><span style='font-size:10.0pt;font-family:"Arial","sans-serif"'>Erionsequiat. Ibus apel everehe nectinihil et, quia <br>nonestrupta cuptaesed que peri nam nonsedi tempore,  <br>ut enimaione nonsedi vitat. <span style='color:red'>(10 pt Arial Regular)</span>
</div>

当我在网上搜索类似问题时，答案似乎是使用vertical-align: top。这对我来说没有帮助。谁能帮我解决这个问题？谢谢。

只有一件事：答案必须使用基本的 css，没有网格或 flexbox。这是因为我需要它在所有浏览器上都可以查看。

【问题讨论】：

移除浮动并使用display:inline-block
@TemaniAfif 我刚试过这个，图像现在在文本上方，我绝对不想要
答案已更新，请查看
@DavidJ。为什么不使用 position: relative 并从顶部移动图像？
你应该先清理你的 HTML，然后 CSS 才能正常工作

标签： html css vertical-alignment

【解决方案1】：

最好使用弹性盒而不是浮动和垂直对齐。

<div class="box" style='display: flex;'>
    <img width="120px" height="120px" src="./5 Bilder_Logos/cat.jpeg"/>
    <div class="content" style="margin-left: 15px;">
        <p class=EinfAbs style='margin-top:0;'><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'>AWARD WINNER 2019 </span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:red;letter-spacing:.4pt'>(14 pt Arial Bold)</span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'><o:p></o:p></span></b></p>
        <p class=MsoNormal><span style='font-size:10.0pt;font-family:"Arial","sans-serif"'>Erionsequiat. Ibus apel everehe nectinihil et, quia <br>nonestrupta cuptaesed que peri nam nonsedi tempore,  <br>ut enimaione nonsedi vitat. <span style='color:red'>(10 pt Arial Regular)</span>
    </div>
</div>

并使用align-items: flex-start; 对齐您的盒子内容。

【讨论】：

【解决方案2】：

试试这个：

.html

<div class="example">
  <img src="…">
  <p>Award……</p>
</div>

.css

.example {
  display: inline-block;

  img, p {
    vertical-align: top;
  }
}

我建议您删除所有样式属性并将其放入类中:)

【讨论】：