CODEWITHSUNDEEP
cssresponsive-designcentervertical-alignmentgeometry
Staffan Estberg
Staffan Estberg

Reputation: 7025

Align horizontally and vertically in a circle

Following an example found over at CSS Tricks, I'm trying to center align content that is inside a circle container that is responsive. The example doesn't seem to be able to handle much content, and immediately breaks as soon as I enter more than a few lines of text.

Code Pen Example

Inside the circle I need to have a header and a paragraph. Is there any way to set a max width of this content so that it isn't placed outside the circle when it doesn't fit?

Upvotes: 0

Views: 1369

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can set top value accordingly in your .content code pen

Edit

Do this changes:

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;

}
.content span{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

Now short text or long text that all will be centered now.

check this

Upvotes: 2

Related Questions