如何将图像旁边的文本垂直居中

无论我做什么，我都无法使镜头在图像旁边垂直居中。

有什么想法吗？我已经搜索过但没有结果，任何帮助将不胜感激！谢谢！

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

FIDDLE http://jsfiddle.net/mbM7C/4/

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%;
}

我认为下面的 CSS 可以解决这个问题：

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%;
}

Apply vertical-align: middle to .first p and .ipad.

Vertical-align属性不是继承的，所以需要为需要调整的子元素指定它。

参考： http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

请参阅小提琴演示：http://jsfiddle.net/audetwebdesign/UwffH/ http://jsfiddle.net/audetwebdesign/UwffH/