如何垂直居中在图像旁边的文本 [英] how to vertically center text beside image

问题描述

无论我怎么做，我有一个问题，使垂直中心沿着图像的旁边。

Whatever I seem to do I have a problem making the take vertically center alongside of the image.

任何想法为什么会这样？我搜索，但没有任何帮助，任何帮助将不胜感激！谢谢！

Any ideas of why this is? I've searched but to no avail, any help would be appreciated! Thanks!

（您可能需要使结果窗口变宽才能看到我在说什么。）

(You may have to make the results window wider to see what I am talking about.)

FIDDLE

HTML：

<div class="first">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       Quisque varius pulvinar imperdiet. Cras quam orci, <br> 
       Duis vulputate risus rutrum, elementum purus non,</p>
    <img class="ipad" src="http://www.technobuffalo.com/wp-content/uploads/2012/12/ipad-mini-scaled-1.jpg">
</div>

CSS：

p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

.first {
    height: 100%;
    vertical-align: middle;
    line-height: 0;
}

.first p {
    display: inline-block;
    width: 49%;
}

.ipad {
    display: inline-block;
    width: 49.2%;
}

推荐答案

做诀窍：

p {
    margin: 0;
    padding: 1em 0;
    font-size: 1.8em;
    line-height: 1.5;
}

.first {
    height: 100%;
    line-height: 0;
}

.first p {
    vertical-align: middle;
    display: inline-block;
    width: 49%;
}

.ipad {
    vertical-align: middle;
    display: inline-block;
    width: 49.2%;
}

应用 vertical-align：middle 到 .first p 和 .ipad 。

参考： a href =http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align =nofollow> http://www.w3.org/TR/CSS2/visudet。 html＃propdef-vertical-align

请参阅fiddle demo： http://jsfiddle.net/audetwebdesign/UwffH/

See fiddle demo: http://jsfiddle.net/audetwebdesign/UwffH/

这篇关于如何垂直居中在图像旁边的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！