Vertically align text as middle in span/label irrespective of screen resolution not working

Question

I am able to vertically align text in span(which is inside div) but i need my page to be independent of screen resolution. have used line height feature to curb the my text from going out of the div when I change the resolution..but I see its not vertically aligned as middle in all resolution. what feature in css i should look into?

<div>
 <span style="width:49%; height:50%; top:25%; left:0%; line-height:50%;font-size:x-small;font-family:Verdana;font-weight:bold; position:absolute; display:block;">
      Random Text
    </span>
</div>

The above span tag is inside a div. Also What should be the recommended value of line-height.Should it be same as height of the span tag? I saw this link for understanding the vertical aligning of single line text.

> Some other CSS doubts>> 1. a textbox inside a div containing single line of text also goes out of the control while changing screen resolution. what could I possibly do to solve this?I am about to control it in a button

Please post the relative HTML, CSS code you have tried so far. — Hashem Qolami, Aug 23 '14 at 11:36

score 3 · Accepted Answer · edited May 23 '17 at 10:25

3

Remove those position unless extremely needed and use, display:table-cell

Fiddle Demo

div  span {
    border:1px solid red;
    width:49%;
    height:50%;
    display:table-cell; /*check this */
    vertical-align:middle; /**aligns where you want it */
    font-size:x-small;
    font-family:Verdana;
    font-weight:bold;
}

You might wanna check out this thread too : Align multiple divs in one line and center text veticaly and horizontally

edited May 23 '17 at 10:25

Community

1
1

answered Aug 23 '14 at 11:49

NoobEditor

14,239
13
66
102

Thanks for helping me out. It worked.please see my edit for some more css doubts. – Pratik Pattanayak Aug 23 '14 at 12:13
@gotoVoid : `goes out of the control`..how? can you give a fiddle of it? – NoobEditor Aug 23 '14 at 12:14
Hey I was wrong @noobEditor.it doesn't go out. everything works. thanks for the instant help – Pratik Pattanayak Aug 23 '14 at 12:18
@gotoVoid : always a pleasure!! :) – NoobEditor Aug 23 '14 at 12:19
http://jsfiddle.net/pratikp2891991/mxpekunq/. THIS IS MY FIDDLE DEMO.. i followed your steps. why is it looking dfferently in 800x600 resolution – Pratik Pattanayak Aug 23 '14 at 13:23
@gotoVoid : because you have given `table-cell` to an `absolute` positioned element....you'll have to remove `position` if you want `vertical-align` to work.....any particular reason why you are making everything `absolute`?? – NoobEditor Aug 23 '14 at 18:01

score 2 · Answer 2 · edited May 23 '17 at 10:25

2

You could position the span element vertically at the middle by using top: 50% and adding a negative top margin which is equal to half of the height of the line.

Here you go:

EXAMPLE HERE

span {
  position:absolute;
  top: 50%; left:0;

  font-size: 0.7em; 
  line-height: 100%;  /* 100% of font-size */

  margin-top: -0.35em;
}

However if you're not eager to use absolute positioning, you could follow this approach.

Note: I've nothing against table-cells, except the effect relative positioning is undefined for such types of elements. If you don't mind, you could follow @NoobEditor's solution as well.

edited May 23 '17 at 10:25

Community

1
1

answered Aug 23 '14 at 11:45

Hashem Qolami

88,138
25
132
151

`independent of screen resolution` - not meeting this mate!! – NoobEditor Aug 23 '14 at 11:46
OP wants a responsive solution to vertical alignment of text in middle inside `span`! – NoobEditor Aug 23 '14 at 11:50
@NoobEditor What do you mean? This IS a responsive solution, just try to change the container's height. – Hashem Qolami Aug 23 '14 at 11:53
@NoobEditor Actually the previous link was broken accidentally, check the new one please :) – Hashem Qolami Aug 23 '14 at 11:54
@NoobEditor Just use Chrome Developer tool :) – Hashem Qolami Aug 23 '14 at 11:59
1

and we restart out history of UN-unanimous answer!! :) – NoobEditor Aug 23 '14 at 12:10
1

@NoobEditor indeed :) – Hashem Qolami Aug 23 '14 at 12:12

Vertically align text as middle in span/label irrespective of screen resolution not working

2 Answers2