Align the content inside the rounded div

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?


Source: css3

Leave a Reply