Responsive circle with centered text

[DennisJohnsen]

Hi all!
I am currently redoing my personal website, and i was in the need of a responsive circle that could have centered text.

So this is what i came up with. It should work (somewhat) across all browser, and i like it like that. BUT i think it seems abit silly to have a 4 layers of HTML to get the results.

So i was woundering if anyone could help me clean up the code, and even rewrite it in a different and better way. Because i have at the moment stared my self blind on it.

Codepen

Kind regards
Dennis

[eamai]

There you go – http://codepen.io/anon/pen/rhjxG

[Senff]

I would add a line-height of 0 to that to get the text vertically centered.

[DennisJohnsen]

Brilliant guys.

Adding line-height of 0 to your solution eamai makes it work. Though its limited to one line of text, but that is fine.

Some times its difficult to think simple ;-)

[Nishant]

@eamai
You should add line-height:0; in your PEN. without it , If you are on a really small screen then your “ICON” will no longer available in center.

TRY iT: http://codepen.io/anon/pen/cqoFv

@FULL SCREEN : http://codepen.io/anon/full/cqoFv

[Nishant]

@eamai
You should add line-height: 0; in your PEN. without it , If you are on a really small screen then your “ICON” will no longer available in center.

TRY iT: http://codepen.io/anon/pen/cqoFv

@FULL SCREEN : http://codepen.io/anon/full/cqoFv

[gasablanca]

Wonderful stuff! Who knows how to align the text at the top and maintain the circle shape?

best regards,

gasablanca

[Paulie_D]

Who knows how to align the text at the top and maintain the circle shape?

Not possible just yet.

[paulob]

Did you mean something like this?

Not sure its very useful in this form.

[Author]

Posts