How to keep the text vertically aligned in any con

2019-04-15 13:39发布

问题:

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/



标签: html css xhtml