Horizontally and Vertically align a span element

Demo

  <div class="subject" index= "0">
        <span class="subject_name">FIFA</span>
        <span class="subject_completion">55%</span>
    </div>

.subject span
{ 
 display: table-cell;
 vertical-align: middle;
}

Why it is not vertically aligning my span div? How do i align it vertically which should not affect horizontal aligning also?

I am not preferring using top, margin-top, padding-top. I am preferring something which should work even size of my circle changes.

I am free to modify html also, but i am first preferring span instead div.

Please suggest some solutions.


Source: css3

Leave a Reply