Align the content inside the rounded div

Question

 .subject_container
 {
  width: 200px;
  height: 250px;
  border: 1px solid #eee;
  display: table-cell;
 }

 .subject
 {
  border-radius: 50%;
  border: 1px solid #653;
  width: 175px;
  height: 175px;
  margin: auto; 
  margin-top: 25%;
  position: relative;
 }

 .subject div 
 { 
   text-align: center;
  }

I can understand that my content AB DE VILLIERS/IKER CASSILAS are inside .subject div only. But i am using border-radius:50% to make my div a circular. How can i fit my content inside my circular div? i want solutions to work even if i change the size of my div.

Any suggestions?

Can you clarify your question. I don't really understand what your asking. — mattdevio, May 23 '15 at 05:26
@magnetwd [See this](http://jsfiddle.net/GopsAB/e4b3kd3k/5/) it si touching the borders. — Gibbs, May 23 '15 at 05:27

score 1 · Answer 1 · answered May 23 '15 at 05:24

1

Try This:

.subject div
{ 
    text-align: center;
    position:relative;
    top:50%;    
}

answered May 23 '15 at 05:24

Sagar

642
3
14

Nooo. Set top 20% and try in that fiddle. [See this](http://jsfiddle.net/GopsAB/e4b3kd3k/5/) – Gibbs May 23 '15 at 05:26
Should text be at center of Circle or Square div? – Sagar May 23 '15 at 05:28

score 1 · Answer 2 · answered May 23 '15 at 05:31

1

You need wrap subject_name and subject_completion in a new div. So, apply absolute center to this div. For that, add follow styles to new div:

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

Also, you should declarate height and width for .wrapper if you need it.

answered May 23 '15 at 05:31

Alvaro Felipe

21
2

Better Approach. [Problem is](https://jsfiddle.net/GopsAB/e4b3kd3k/10/) Overflow:hidden is not working. How to hide it if it goes beyond the wrapper – Gibbs May 23 '15 at 05:40
overflow: hidden must be declared in container (.subject in your case) not in the new wrapper. And works fine. – Alvaro Felipe May 23 '15 at 05:47

Michal Przybylowicz · Answer 3 · 2015-05-23T05:48:41.960

1

Try this approach:

.subject div
{ 
    display: table-cell;
    text-align: center;
    vertical-align:middle;
    height: 175px;
}

Demo

With overflow:hidden;

Demo

edited May 23 '15 at 05:48

answered May 23 '15 at 05:31

Michal Przybylowicz

1,558
3
16
22

Hi, I like your approach. The thing is I just replicated div contents. When it increases i wanns hide it `overflow:hidden` or something else. Since it is going out of the circular div. [problem](https://jsfiddle.net/GopsAB/e4b3kd3k/9/) – Gibbs May 23 '15 at 05:35
@GopsAB Then add `overflow:hidden;`to `.subject` class. – Michal Przybylowicz May 23 '15 at 05:47
@GopsAB If this is the answer You were looking for please consider accepting my answer. – Michal Przybylowicz May 23 '15 at 05:50
yes Man, I got two working scenarios. one is with wrapper and another is without wrapper. i am just checking both – Gibbs May 23 '15 at 05:53

score 1 · Accepted Answer · edited May 23 '17 at 12:05

You need to add line-height to the .subject and set it to the same width and height of your .subject. Then you need to wrap your content inside your .subject with another div. Then apply the following CSS to it:

.subject_wrapper
{
    line-height: normal;
    display: inline-block;
    vertical-align: middle;
}

jsFiddle Example: here

EDIT: If you want the font-size to change if the text tries to overflow, you need to use JavaScript. Example post on how to do this: Auto-size dynamic text to fill fixed size container

EDIT 2: If you just want overflow: hidden; applied to anything outside of the circle just add overflow: hidden; to the .subject.

Example: http://jsfiddle.net/trLhdj4e/3/

Align the content inside the rounded div

4 Answers4