Putting stuff in circles

Putting stuff inside circles is not a natural act for HTML. There are hacky ways to do it, depending on what you are trying to accomplish.

If you want to stick a font icon from, say, Bootstrap into the middle of a cirlce, that’s pretty easy. Font characters in icon fonts are generally centered, so in Bootstrap you would just apply some CSS to a particular glyph.

1
2
3
4
5
6
7
.glyphicon {
    background-color: purple;
    color: white;
    padding: 60px;
    font-size: 6em;
    border-radius: 50%;
}

No fuss, no muss. 50% border-radius makes the circle, and it will resize based on the font-size and padding.

Putting in regular text is a little different. Because you don’t know the horizontal dimensions, you can’t padding your way into a circle. For that you’ll need a fixed container size and a line-height set to the same height as the container for vertical centering.

1
2
3
4
5
6
7
8
9
10
.circle-singleline {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    font-size: 50px;
    line-height: 200px;
    text-align: center;
    background: purple;
    color: white;
}

That won’t resize based on content, so make sure your content fits.

Multiple lines of text is yet another problem. The line-height trick won’t save you here. Using display: table-cell, which feels slimy, will give you a proper vertical alignment of the content. Again, this won’t resize based on content, so make sure your content fits.

1
2
3
4
5
6
7
8
9
10
.circle-multiline {
    display: table-cell;
    height: 200px;
    width: 200px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: purple;
    color: white;
}