11

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

5
  • 1
    You're using a lot of spans..it seems to me that other, more semantic elements might suit you better.
    – Paulie_D
    Nov 19, 2014 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, 2014 at 14:44
  • possible duplicate of How do I vertically align something inside a span tag?
    – vaso123
    Nov 19, 2014 at 14:45
  • 1
    This is a Breadcrumb generated by ASP.net Nov 19, 2014 at 14:45
  • then add span.breadcrumb > span {line-height: 30px; height: 30px;}
    – vaso123
    Nov 19, 2014 at 14:46

1 Answer 1

15

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>

7
  • The extra SPAN is auto generated by ASP.net which I have no control over but thank you. I will test it out. Nov 19, 2014 at 15:06
  • Thats why I said I only removed for this snippet only ;)
    – dippas
    Nov 19, 2014 at 15:08
  • It gives me the same display but I think this is the closest it will come. Thank you for trying :) Nov 19, 2014 at 15:19
  • can you provide your image and code for that part? I'll fix you that
    – dippas
    Nov 19, 2014 at 15:20
  • 2
    Here it is 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, 2014 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.