Irfan Syed Irfan Syed - 1 month ago 6
HTML Question

How can i resize the circle radius to fit the paragraph in it

I am trying to fit the paragraph and resize the circle radius .. can anyone look into this?



#circle{
background:#aaa;
height:300px;
width:300px;
border-radius:50%;
text-align:center;
/*line-height:300px;*/

}

<body>
<div class="container">
<div id="circle">
<span class="text-center"><p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p></span></div>
</div>
</body>




Answer

UPDATED: Using the CSS transform property you can be more accurate with center positioning using relative sized objects.

Of course you could use some javascript to get the height of the paragraph and position it accurately regardless of content.

I did remove the span and a div, didn't see a need for them.

.container{
  background:#aaa;
 height:300px;
 width:300px;
  border-radius:50%;
 text-align:center;
 vertical-align: middle;
 position: relative;
 display: block;
}

.container p {
 position: absolute;
  
 top: 47%; 
  
  /* used 47% rather than 50% 
  becuase items tend to "sink" visually, 
  so placing it slightly higher is a good thing. */
  
transform: translateY(-50%); 

}
<body>
  <div class="container">
    <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p>      </div>
</body>

Comments