CODEWITHSUNDEEP
css
StudioTime
StudioTime

Reputation: 23989

Vertically align symbols and text

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>

Upvotes: 7

Views: 5792

Answers (5)

rorsach
rorsach

Reputation: 64

See the inline style attributes I added below to demonstrate how to fix it.

I used inline styles to demonstrate - you'd want to extract those to your own style sheet. 

<h3>
   <span style="display: inline-block; vertical-align: middle">STARS</span>
   <span class="stars" style="display: inline-block; vertical-align: middle">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
</h3>

Note: I wrapped the title text with a span to make it work. You need two inline-block elements side by side to align something vertically this way.

Note: You'll also want to add some padding between the two spans.

JSFiddle https://jsfiddle.net/p357agt2/16/

Upvotes: -1

Sebastian Simon
Sebastian Simon

Reputation: 19485

I figured it all out: https://jsfiddle.net/p357agt2/2/.

There were a few things on which the rendering engine had a different opinion of rendering things than you. I managed to make a reduced example of your layout:

First of all: note the word STARS being wrapped in a <span> element.

<h3>
  <span>STARS</span><span>&#9733;&#9733;&#9733;&#9733;&#9733;</span>
</h3>

Then: these are the minimally required rules for this to work.

span{
  vertical-align:middle;
}
span:first-child{
  font-size:40px;
}
span:last-child{
  font-size:12px;
}

So what I changed in your JSFiddle is:

  1. I removed that margin-bottom rule entirely
  2. I removed the vertical-align rule from the stars class
  3. I wrapped the word STARS in a <span> element
  4. I applied vertical-align:middle to any span in an h3: h3 span
  5. (Optional) I applied margin-left:.3em; to .stars to produce a little gap between STARS and ★★★★★¹

Basically the text node STARS needed to be inside a <span> for this to work. Then vertical-align needed to be applied to both.

Full code:

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 {
  margin-left: .3em;
  opacity: 0.6;
  font-size: 0.7em;
}
h3 span{
  vertical-align: middle;
}
<h3>
  <span>STARS</span><span class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
</h3>

As far as I know this fix changes your layout, code and standard rendering (e. g. those display:table-cell work arounds) the least.

1: You could also get a space by having a line break between the two <span> nodes in the source code but it looks weird when selected…

Upvotes: 2

mmgross
mmgross

Reputation: 3092

vertical-align will work, if you add display:table-cell or display:inline-block and wrap your text in a <span> with the same display-property

html, body {
  color: #333;
}
h3 {
  font-size: 2em;
  font-weight: 100;
}
.text {
    display:inline-block;
    vertical-align: middle;
  }
.stars {
    display:inline-block;
    opacity: 0.6;
    font-size: .2em;
    vertical-align: middle;
}
<h3>
  <span class="text">STARS</span>
  <span class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
</h3>

Upvotes: 3

OneHoopyFrood
OneHoopyFrood

Reputation: 3959

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.

Upvotes: 5

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

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>

Upvotes: 3

Related Questions