Align the content inside the rounded div - html

Question

Demo
.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?

Answer 1

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/

Answer 2

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

Answer 3

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.

Answer 4

Try this approach:
.subject div
{
display: table-cell;
text-align: center;
vertical-align:middle;
height: 175px;
}
Demo
With overflow:hidden;
Demo