开发者

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

开发者 https://www.devze.com 2022-12-27 03:10 出处:网络
I want to be able to keep a text on the left, but in themiddle of a div. <div id=sel>text goes here</div>

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


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.


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

0

精彩评论

暂无评论...
验证码 换一张
取 消