1

I've been pulling my hair for some time now trying to come up with the following layout: a circle that's dynamic in size (responsive) with content inside being centered, both horizontally and vertically. The content will vary in length and as such needs to be vertically aligned using either the Absolute Centering method (http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/#Height) or a table-cell approach, both whom I haven't been able to succeed using.

My attempt so far - http://codepen.io/anon/pen/clqzB

Staffan Estberg
  • 6,795
  • 16
  • 71
  • 107
  • Solution is [here](http://stackoverflow.com/a/9359039/607874). Check the last update from that answer "Resize with Content - Improvement" – Jose Rui Santos Aug 15 '16 at 11:50

1 Answers1

0

Responsive ratios add a slight difficulty to the centering problem, but you were on the right track with using padding to give the circle a 1:1 ratio.

You asked to use Absolute Centering or the Table-Cell method, but I've found Inline-Block centering (which I cover in the article) to be the most reliable cross browser for varying length content, which is important since the size of the circle is always changing causing the text to reflow.

This also allows using padding-bottom: 100% on the psuedo-element that's already created with the .Inline-Center class to set the 1:1 ratio of the circle and centering your div.content correctly.

Here's the code: http://codepen.io/shshaw/pen/kGdAe

shshaw
  • 3,123
  • 2
  • 23
  • 33