Home How to align image flush with text
Reply: 1

How to align image flush with text

John Auer
1#
John Auer Published in 2017-12-07 22:37:37Z

I'm trying to place icon next to text using span but the images are not flush with the text that is beside them. They are moved up. I'm wondering if anyone knows why it is displayed this way and how to fix it. Thanks you.

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

j08691
2#
j08691 Reply to 2017-12-07 22:47:41Z

Because the default vertical alignment for inline elements is baseline. Set the alignment on your images to middle> Also be sure to remove any white space in your code that would be between those elements as browsers are sensitive to it:

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>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.329127 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO