CODEWITHSUNDEEP
htmlcss
oneman
oneman

Reputation: 811

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 there is a better way to do this because my method only works for a certain amount of 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: center;
}
<div class="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>

This is what it looks like enter image description here

But I want it to look more like this but without having to add margin to the top of the text inside the div. enter image description here

Upvotes: 3

Views: 96

Answers (4)

Ron.Basco
Ron.Basco

Reputation: 2438

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.description p{
  max-width: 450px;
  margin: 0 auto;
}
<div class="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>

Upvotes: 0

Gowtham
Gowtham

Reputation: 1597

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;
}
<div class="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>

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39322

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;
}
<div class="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.description div.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.description div.text {
  vertical-align: middle;
  display: table-cell;
}
<div class="description">
  <div class="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>

Upvotes: 2

junkfoodjunkie
junkfoodjunkie

Reputation: 3178

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.description h1 {
  margin: 0;
  padding: 0;
}
div.description p {
  padding: 3.5em;
  position: absolute;
  top: 50%;
  max-width: 470px;
  max-height: 470px;
  transform: translate(0,-50%);
}
<div class="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>
<div class="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>

Upvotes: 3

Related Questions