0

Is there a way to vertically align a letter within a span that is styled in a way that it circles and grows with the height of the letter?

My goal is to create a single style to accomplish this. Getting the size of the circle to scale with the height of the letter was easy enough but I can't figure out how to get the letter to vertically align.

There are plenty of examples where the size of the container is fixed but I'm coming up short when I try to find an example that vertically aligns the text without using a fixed container size (i.e. where the container size is proportional to the font size).

I have tried creating another span/div to wrap the letter inside of the circle and play with margins and padding but I can't figure out how to do this without distorting the shape of the circle.

Am I approaching this incorrectly by trying to have the <h1> and <h3> wrap the spans or is there a trick that can help me accomplish this?

HTML

<h1>
    <span class="circle">A</span>
    <span class="circle">B</span>
    <span class="circle">C</span>
</h1>

<h3>
    <span class="circle">A</span>
    <span class="circle">B</span>
    <span class="circle">C</span>
</h3>

CSS

.circle {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    border: 1px solid black;
    border-radius: 50%;
    background-color: lightblue;
    text-align: center;
}

JSFiddle

Erik Gillespie
  • 3,929
  • 2
  • 31
  • 48
  • 1
    Like this http://jsfiddle.net/j08691/sy60euf6/? – j08691 Oct 03 '14 at 16:06
  • That's great! I like the simplicity of the line-height fix from @danko so I'm going to accept that but I like this too. How did you come up with the .3em and .5em? – Erik Gillespie Oct 03 '14 at 16:10
  • Possible dublicate http://stackoverflow.com/questions/4801181/vertically-and-horizontally-centering-text-in-circle-in-css-like-iphone-notific – Alex Char Oct 03 '14 at 16:11
  • 1
    The difference between my question and the suggested duplicate is that I wanted my circles and alignment to scale with different font sizes. The suggested dupe has a fixed size. – Erik Gillespie Oct 03 '14 at 16:15

1 Answers1

2

Use this line of code too:

line-height:1.8em;

Check your Demo Fiddle

DaniP
  • 37,813
  • 8
  • 65
  • 74