Align characters and text vertically

Question

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

The problem is that the stars are less than a word, and I want them to be vertically aligned, but they cannot figure out how to do this.

Here is what I am trying: Here is the violin

 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 way is to simply put position: relative and raise them a little.

This is something you should not do often (mess with positions may cause your page to be messy if you don’t know what you are doing), but it works for small 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 your preferences. I just put .1em because I think it works best for different font sizes, but you play with it until you like it.

---

As for why vertical-align did not work, this is because this property only affects inline elements, see the Rick Hitchcock answer for more details on this. h3 not an inline block, so there is nothing to align span with!

While you can change the display around to do it right, this is not what you want for your situation. A position is better for aligning icons (for example, font icons) with the text next to it.

Answer 2

vertical-align will work if you add display:table-cell or display:inline-block and wrap the text in <span> using 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> 

Answer 3

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

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

The center of the cell is aligned with the center of the row spans.

Add these styles:

 h3 { display: table-row; } .stars { display: table-cell; } 

Excerpt:

 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> 

Answer 4

I understood everything: https://jsfiddle.net/p357agt2/2/ .

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

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

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

Then: these are the minimum necessary rules for this.

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

So what I changed in your JSFiddle :

• I completely removed the margin-bottom rule
• I removed the vertical-align rule from the stars class
• I wrapped the word STARS in the <span> element
• I applied vertical-align:middle to any span in h3 : h3 span
• (Optional) I applied margin-left:.3em; to .stars to create a small gap between STARS and ★★★★★ ¹

Basically, the text node STARS is needed to be inside the <span> for this. Then vertical-align must be applied to how .

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 (for example, those that display:table-cell work).

---

1: you can also get a space by dividing the line between two <span> nodes in the source code, but when you select this option it looks weird ...

Answer 5

See the built-in style attributes below for a demonstration of how to fix them.

I used inline styles to demonstrate - you want to extract them into your own stylesheet.

 <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 space so that it works. You need two built-in blocks next to each other in order to align something vertically this way.

Note. You will also want to add a residence permit between two spans.

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