开发者

How to keep the text vertically aligned in any condition?

For example in the below image I want keep the text always vertically aligned in all condition. even if text is in one, two or three lines.

means the text should be vertically centered always. I don't want to add extra span

How to keep the text vertically aligned in any condition?

<div>
<img src=ab开发者_C百科c.jpg"> Hello Stackoverflow. Thank you for help me
</div>

I want to achieve with this html.

Edit

And I don't want to give fix width and height to any element


Chris Coyier wrote an excellent tutorial on just this: http://css-tricks.com/vertically-center-multi-lined-text/

I've used it myself, and it works perfectly.


try with

HTML

<div>
    <img src="" height="155px" width="155px" style="float:left">
    <div class="imageText">Hiiii <br/> how r u? <br/> use multiple lines</div>
</div>

CSS

.imageText {  
    display: table-cell; // this says treat this element like a table cell
    vertical-align:middle;
    border:1px solid red;
    height:150px;
    width:150px;
    text-align:left;   
}

DEMO

Note: width and height matters


I really like the method described @ http://reisio.com/examples/vertcenter/

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜