Text Overflow In Circle Div

I have a circle div and my text isn't inside it. By default it is slightly above and I can't pinpoint why. I have added margin to the top to force it inside the div but I am sure t

Solution 1:

Here's a version that allows for any size text inside, although of course the size of the surrounding <div> will have to be changed if the size of the content is vastly greater. I added a second example with a bit more text.

div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: justify;
  text-align-last: center;
  position: relative;
}
div.descriptionh1 {
  margin: 0;
  padding: 0;
}
div.descriptionp {
  padding: 3.5em;
  position: absolute;
  top: 50%;
  max-width: 470px;
  max-height: 470px;
  transform: translate(0,-50%);
}

<divclass="description"><h1>Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a.</p></div><divclass="description"><h1>Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat.</p></div>

Solution 2:

You should use css3 flexbox. Following css will make an element horizontally and vertically middle aligned:

div.description {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

div.description {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  margin-top: 250px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-color: #caebf2;
  white-space: pre-line;
  text-align: center;
  padding: 25px;
}

<divclass="description"><h1>Title</h1><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, 
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra 
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget 
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo 
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, 
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, 
a ornare ex blandit a.
  </p></div>

For old browser support you can use following css to make it middle aligned:

div.description {
  display: table;
}
div.descriptiondiv.text {
  vertical-align: middle;
  display: table-cell;
}

div.description {
  display: table;
  position: relative;
  margin-top: 250px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-color: #caebf2;
  white-space: pre-line;
  text-align: center;
  padding: 25px;
}
div.descriptiondiv.text {
  vertical-align: middle;
  display: table-cell;
}

<divclass="description"><divclass="text"><h1>Title</h1><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, 
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra 
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget 
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo 
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, 
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, 
a ornare ex blandit a.
    </p></div></div>

Solution 3:

You can use the concept of padding:20px; to achieve the output you have expected

div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
padding: 20px;  
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}

<divclass="description"><h1>Title</h1><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, 
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra 
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget 
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo 
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, 
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, 
a ornare ex blandit a.
</p></div>

Solution 4:

you can try this. giving a max-width to p element smaller than the circle so it will not exede beyond the circle.

div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}
div.descriptionp{
  max-width: 450px;
  margin: 0 auto;
}

<divclass="description"><h1>Title</h1><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a.
</p></div>