How do I vertically align something inside a span tag?

The single-line stratagem with line-height

The good ol' line-height trick can come in handy when you need to vertically center a lone ranger (single line of text) inside a span:

<span style="line-height: 50px;">
    "<!-- Insert Philosoraptor meme here -->"
</span>


'Sir Line-Height' should ideally be as tall as his home, the noble container, ensuring he can perfectly lounge, right in the middle.

Modern times call for Flexbox

In this era of responsive designs, Flexbox emerges as the hero of vertical alignment in modern layouts:

.container {
  display: flex; /* making container flexible */
  align-items: center; /* Splitting the atom, much? Nah, just vertically centering */
  justify-content: center; /* Also centers the content horizontally, because why not?! */
}


<div class="container">
  <!-- Sits right here in the middle, like a zen master -->
  <span>Right in the Center</span>
</div>


Johnny Flexbox promises you nimble content allocation, not breaking a sweat about the container's height. An absolute dream for responsive web designs.

Practically Applying the Knowledge

Screen Presence of Inline Elements

Got inline elements up your sleeve, like images? Using vertical-align: middle; with an inline-block display style, can make your design pop:

<span style="display: inline-block; vertical-align: middle;">
    <img src="image.png" alt="" style="vertical-align: middle;">
    The image and me, we're inseparable, we're Middle-Out!
</span>


Line-Height Pitfalls

Do avoid setting a specific height for your span if you're using line-height for centering. Unless you are into making things complicated. Instead, let containers provide the height, and have the span inherit this.

Multiline Woes

Got a multi-paragraph essay to center? Reset the inner element's line-height to normal and wrap it like a burrito in an inline-block container:

<div style="height: 100px; line-height: 100px; display: table-cell; vertical-align: middle;">
    <!-- Line-height plays a double agent, going normal on us -->
    <span style="line-height: normal; display: inline-block;">
        Multi Line Poetry<br>Content, so aligned it's Artsy
    </span>
</div>


The Overflow Marathon

For Spartan text on a single line that doesn't understand the concept of "breaks", use white-space: nowrap;. It's the obedient kid who won't break stuff no matter how much you push:

.no-break {
  white-space: nowrap; /* Running a marathon, with no intent of breaking -->
}


Battle of the Browsers

Always account for the browser warfront. Vertical alignment can don various disguises on different web browsers, thanks to rendering inconsistencies. Ensure your solution is peacekeeping across all platforms.