如何将图像齐平与文本对齐

Question

我正在尝试使用span在文本旁边放置图标，但图像不会与旁边的文本齐平。他们向上移动了。我想知道是否有人知道为什么它以这种方式显示以及如何解决它。谢谢你。

<div class="search" id="search">
  <input type="search" placeholder="What can we help you find today?"><span>
  <img src="search.png" width="20" height="20"></span>
</div>

<div class="customer" id="customer">
  <div class="My Account">
    <p>My Account<span><img src="user.png" width="23" height="23"></span>
    </p>
  </div>
  <div class="cart">
    <span>Cart |</span><span>0</span><span>items</span><span>
    <img src="cart.png" width="23" height="auto"></span> 
  </div>
</div>

Answer 1

因为内联元素的默认垂直对齐方式是基线。将图像上的对齐设置为中间＆gt;还要确保删除代码中的任何空格，因为浏览器对它敏感：

img {
  vertical-align: middle;
}

img {
  vertical-align: middle;
}

<div class="search" id="search">
  <input type="search" placeholder="What can we help you find today?"><span><img src="search.png" width="20" height="20"></span>
</div>

<div class="customer" id="customer">
  <div class="My Account">
    <p>My Account<span><img src="user.png" width="23" height="23"></span>
    </p>
  </div>
  <div class="cart">
    <span>Cart |</span><span>0</span><span>items</span><span><img src="cart.png" width="23" height="auto"></span>
  </div>
</div>