How to Vertically Align Something Inside a Span Tag

Vertical align span-Element in label-Element

Add vertical-align:top to span

label span{
    display: inline-block;
    width: 30%;
    vertical-align:top;
}

JS Fiddle

Although I would suggest you to use div instead of label in such cases. label is not meant for having child elements.

How to vertically center text in a span ?

Try using flexbox, all modern browsers support it, with prefixes it also works in IE10.

span {

  min-height: 100px;

  display: inline-flex;

  align-items: center;

  border: 1px solid aqua;

}

<span>vertical center</span>

Vertical align middle not working in span element

You can use display: flex to achieve this.

span {

  height: 150px;

  width: 150px;

  border: 1px solid black;

  display: flex;

  align-items: center;

  justify-content: center;

}

<span>center</span>

How to vertically center an image inside a SPAN

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>

Vertically align text in a span tag without specifying height?

I hope this will answer your question.

You are using span which display is inline.
try to add display: inline-block if you want to use span

HTML/CSS: Vertical aligning span with vertical-align and line-height

Everything you said is right but you simply forget something which is inheritance. The span element is having the same line-height defined on the div that's why bottom has no effect in your case.

Reset the value to initial and it will work.

<div style="line-height: 50px; border: 1px solid yellow">

<span style="border: 1px solid red; vertical-align: bottom;line-height:initial;">Some text</span>

</div>

---

Related Topics