Keep text on left and middle of the div, not center

Question

Hello,

I want to be able to keep a text on the left, but in the middle of a div.

<div id=sel>text goes here</div>

and my CSS for the same

sel{
    text-align:left;
    vertical-align:middle;
}

The characters and lines of the text may vary. I am more focussed on the text with a single line that sits on the top. I do not want to use position:absolute/relative.

Appreciate all help.

Thanks Jean

Answer 1

Firstly, a side note: vertical-align only works with table cells. As a result, this problem is trivial with table cells. See Understanding vertical-align, or "How (Not) To Vertically Center Content".

Otherwise you will need to put that content inside another block and then vertically center that block within the outer block. See Vertical Centering in CSS.

Answer 2

If you are dealing with a single line only, the easiest way is probably to set the line-height equal to the height of the div, for example:

#sel {
    text-align: left;
    height: 4em;
    line-height: 4em;
}

For other scenarios, have a look at this page