[Solved] How to middle align small text next to large text?

[magician11]

Here is the code I’m looking at..
http://jsfiddle.net/magician11/sGtcE/

I’m wondering how to best get the heading on the right of the number middle aligned next to that large text number?

Thanks.

[MikeMedia]

Have you tryed doing this?

<div class="holder"><span>#1</span> <span>Personal Coaching</span></div>   

CSS:

.large_numbering {

font-size: 60px;
  font-weight: bold;
  vertical-align: middle;
}

.some_heading {
  color: #ff9b00;
  font-size: 22px;
  margin-left: 20px;
}

.holder{
     height: 50px;
     line-height: 50px;
}

[Paulie_D]

It will actually depend on what the overall design is supposed to be but

display:inline-block and vertical-align:middle will get it done.

http://jsfiddle.net/sGtcE/2/

[magician11]

Thanks Paulie_D. That worked great.

I actually did that to the “some_heading” class, but didn’t realise I had to apply it to the “large_numbering” class too.

[Author]

Posts