如何让两张箭头图片与Bet文本横向并排显示？

当前代码中，箭头图片因设置display:block属性显示在“Bet:0”文本下方。请问如何修改才能让这两张箭头图片与“Bet:0”文本横向并排显示？

方法一：用Flex布局包裹目标元素 #

把“Bet:0”文本和箭头图片放在一个行内容器里，通过Flex实现横向排列并垂直对齐：

<p id="pChips">
  Chips: 0<br>
  <span style="display: flex; align-items: center; gap: 0.5vw;">
    Bet:0
    <img src="https://o.remove.bg/downloads/308a61bc-8321-483b-a63f-70a8a1221450/image-removebg-preview.png" style="height: 1.75vh; width: 1.75vw;">
    <img src="https://o.remove.bg/downloads/308a61bc-8321-483b-a63f-70a8a1221450/image-removebg-preview.png" style="height: 1.75vh; width: 1.75vw; transform: rotate(180deg);">
  </span>
</p>

• display: flex让容器内元素自动横向排列
• align-items: center确保文本和箭头垂直居中对齐
• gap: 0.5vw统一设置元素间的间距，不用单独加margin

方法二：修改图片的display属性 #

直接调整箭头的显示模式，取消独占一行的特性，再修正垂直对齐：

<p id="pChips">
  Chips: 0<br>
  Bet:0
  <img src="https://o.remove.bg/downloads/308a61bc-8321-483b-a63f-70a8a1221450/image-removebg-preview.png" style="height: 1.75vh; width: 1.75vw; margin-left: 0.5vw; display: inline-block; vertical-align: middle;">
  <img src="https://o.remove.bg/downloads/308a61bc-8321-483b-a63f-70a8a1221450/image-removebg-preview.png" style="height: 1.75vh; width: 1.75vw; transform: rotate(180deg); margin-left: 0.5vw; display: inline-block; vertical-align: middle;">
</p>

• 把display:block改成display:inline-block，让图片能和文本在同一行显示
• vertical-align: middle避免图片和文本上下错位
• margin-left调整箭头与文本、箭头之间的间距

补充：这类需求的搜索关键词可以用「HTML 文本与图片同行显示」「行内元素垂直对齐」「Flex 横向排列」

内容的提问来源于stack exchange，提问作者asdf fdsa