Keep text left and middle of div, not center

Question

I want to keep the text on the left but in the middle of the div.

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

and my CSS for the same

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

Characters and lines of text may vary. I am more focused on text with one line sitting on top. I don't want to use position: absolute / relative.

Appreciate all the help.

Thanks Jean

+2

X10nD Apr 19 10 at 6:43 am

2 answers

cletus · Answer 1 · 2010-04-19T06:47:59+0000

First, the side of a note: vertical-align

only works with table cells. As a result, this problem is trivial with table cells. See Understanding Vertical Alignment or "How To (Not) To Vertically Center Content" .

Otherwise, you will need to place this content in another box, and then vertically center that box in the outer box. See Vertical Centering in CSS .

Tom Bartel · Answer 2 · 2010-04-19T06:48:08+0000

If you are only dealing with one line, the easiest is 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, see this page