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.
No fuss, no muss. 50%
border-radius makes the circle, and it will resize based on the
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.
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.