How to vertically center an image inside a SPAN

Question

I have the following HTML:

<span id="ctl00_smpWeb" class="breadcrumb hidOverflow">
    <span>
        <a href="default.aspx" title="Home">
            <img src="umb.png" alt="Home" title="Home" class="home" style="vertical-align: middle;" />
        </a>
    </span>
    <span></span>
    <span>Services</span>
</span>

CSS:

.breadcrumb {
    font: 9px 'Verdana', 'Graduate', 'Arial', 'Helvetica', 'sans-serif';
    height: 30px;
    color: #9b9b9b;
    width: 100%;
    font-weight: bold;
}
.hidOverflow {
    overflow: hidden;
}

Outputs:

enter image description here

The home icon is not centered vertically between the two orange line, while the text is.

Please help center it.

If I remove the vertical align from the image and this happens:

enter image description here

You're using a **lot** of spans..it seems to me that other, more semantic elements might suit you better. — Paulie_D, Nov 19 '14 at 14:43
what you need here is a line-height which should be the same height as the block. that should align the image. — Andi, Nov 19 '14 at 14:44
possible duplicate of [How do I vertically align something inside a span tag?](http://stackoverflow.com/questions/732337/how-do-i-vertically-align-something-inside-a-span-tag) — vaso123, Nov 19 '14 at 14:45
then add `span.breadcrumb > span {line-height: 30px; height: 30px;}` — vaso123, Nov 19 '14 at 14:46

dippas · Accepted Answer · 2014-11-19T15:11:35.640

14

Set a display:inline-block and vertical-align:middle to your image, see snippet below:

.breadcrumb {
  font: 9px'Verdana', 'Graduate', 'Arial', 'Helvetica', 'sans-serif';
  height: 30px;
  color: #9b9b9b;
  width: 100%;
  font-weight: bold;
}
.hidOverflow {
  overflow: hidden;
}
.home {
  display: inline-block;
  vertical-align: middle
}
a {
  text-decoration: none;
  /* just for demo */
}

<span id="ctl00_smpWeb" class="breadcrumb hidOverflow">
  <span>
    <a href="default.aspx" title="Home">
      <img src="http://placehold.it/100x100&text=home" alt="Home" title="Home" class="home" />
    </a>
  </span> 
  <span></span>
  <span>Services</span>
</span>

edited Nov 19 '14 at 15:11

answered Nov 19 '14 at 14:47

dippas

58,591
15
114
126

The extra SPAN is auto generated by ASP.net which I have no control over but thank you. I will test it out. – SearchForKnowledge Nov 19 '14 at 15:06
Thats why I said I only removed for this snippet only ;) – dippas Nov 19 '14 at 15:08
It gives me the same display but I think this is the closest it will come. Thank you for trying :) – SearchForKnowledge Nov 19 '14 at 15:19
can you provide your image and code for that part? I'll fix you that – dippas Nov 19 '14 at 15:20
Sure, here it is: http://jsfiddle.net/3ek7t2ur/ (The icon isn't centered vertically)! Thanks. – SearchForKnowledge Nov 19 '14 at 16:02
2

Here it is http://jsfiddle.net/rryw0er7/ , you can change the alignment of the icon as you wish based on the `vertical-align: calc(30px - 23px);` set up on the `img` – dippas Nov 19 '14 at 16:48
if i have multiple images this doesn't work unless i don't apply this style to one of them... – Michael Sep 07 '20 at 22:25

How to vertically center an image inside a SPAN

1 Answers1