How to keep the text vertically aligned in any condition?

送分小仙女□ 提交于 2019-12-06 13:39:05

问题


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

<div>
<img src=abc.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


回答1:


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.




回答2:


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




回答3:


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



来源:https://stackoverflow.com/questions/5729593/how-to-keep-the-text-vertically-aligned-in-any-condition

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!