Vertically align symbols and text

Question

I have the word STARS followed by 5 stars (★)

The problem I have is that the stars are smaller than the word and I want them to vertically align, but can't figure out how.

Here's what I'm trying: Fiddle here too

html, body {
  font-size: 100%; /* for our beloved IE */
  font-size: 12px;
  line-height: 1.2em;
  color: #333;
}
h3 {
  font-size: 2em;
  line-height:1em;
  font-weight: 100;
}
.stars {
  opacity: 0.6;
  font-size: 0.7em;
  vertical-align: middle; /* <-- I thought this would do it */
}

<h3>STARS <span class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span></h3>

Answer 1

The easiest thing to do is just put a position: relative on there and bump them up a bit.

This is something you should not do often (messing with positions can make your page flow messy fast if you don't know what you're doing), but it works for little situations like yours:

html, body {
  font-size: 100%; /* for our beloved IE */
  font-size: 12px;
  line-height: 1.2em;
  color: #333;
}
h3 {
  font-size: 2em;
  line-height:1em;
  font-weight: 100;
}
.stars {
  opacity: 0.6;
  font-size: 0.7em;
  position: relative;
  bottom: .1em; /* em will make it work at any font size, thanks Xufox*/
}

<h3>STARS <span class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span></h3>

Adjust to your preference. I only put a .1em bump up because I think that looks best at various font sizes, but you fiddle around with it till you like it.

---

As for why the vertical-align didn't work, it's because that property only acts on inline elements, see Rick Hitchcock's answer for more detail on that. The h3 isn't an inline block so there's nothing to align the span with!

While you could change the displays around to make this work properly it's not really what you want for your situation. The position is better suited to aligning icons (like font-awesome icons) with the text next to them.

Answer 2

You can solve the problem by making the h3 a table row and .stars a table cell.

According to the table height algorithm, when you use vertical-align: middle on a table cell:

The center of the cell is aligned with the center of the rows it spans.

Add these styles:

h3 {
  display: table-row;
}

.stars {
  display: table-cell;
}

Snippet:

html, body {
  font-size: 100%; /* for our beloved IE */
  font-size: 12px;
  line-height: 1.2em;
  color: #333;
}

h3 {
  font-size: 2em;
  line-height:1em;
  font-weight: 100;
  display: table-row;
}

.stars {
  opacity: 0.6;
  font-size: 0.7em;
  vertical-align: middle;
  display: table-cell;
}

<h3>STARS <span class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span></h3>