如何在图像旁边垂直居中文字

时间:2013-08-05 01:29:11

标签: html css

无论我做什么,我都会遇到一个问题,使拍摄垂直居中于图像旁边。

为什么会这样?我搜索但无济于事,任何帮助将不胜感激!谢谢!

(你可能需要让结果窗口更宽,看看我在说什么。)

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

2 个答案:

答案 0 :(得分:4)

我认为以下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%;
}

vertical-align: middle应用于.first p.ipad

不会继承vertical-align属性,因此您需要为需要调整的子元素指定它。

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

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

答案 1 :(得分:-1)

我建议您使用<table>,但这不是一个好的编程习惯。

HTML:

<div class="first">
    <table border='0'><tr><td>
        <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></td><td>
        <img class="ipad" src="http://www.technobuffalo.com/wp-content/uploads/2012/12/ipad-mini-scaled-1.jpg"></td></tr></table>
                    </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: 100%;
}