无论我做什么,我都会遇到一个问题,使拍摄垂直居中于图像旁边。
为什么会这样?我搜索但无济于事,任何帮助将不胜感激!谢谢!
(你可能需要让结果窗口更宽,看看我在说什么。)
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%;
}
答案 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
答案 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%;
}