Nested center and vertical alignment

Demo

Goal:

I have a container and a circular subject container which will have subject details.

Problem:

Subject div is not horizontally center

CSS

.user_body_content_container
{
 display: table;  
}

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

.subject
{
 border-radius: 50%;
 border: 1px solid #653;
 width: 175px;
 height: 175px;
 margin: auto; 
 position: relative;
 overflow:hidden;
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

.subject div
{ 

}
.subject .subject_completion
{

}

I don’t want the solution alone and I think this design is horrible. Can you please tell me if you find any problems with my design


Source: html5

Leave a Reply