Horizontally and Vertically align a span element


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

.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

This site uses Akismet to reduce spam. Learn how your comment data is processed.