我想将我的缩略图图像垂直对齐我的div - 旁边的文本。将图像与CSS垂直并排放置文本
见的例子在这个小提琴:http://jsfiddle.net/jL5bpmp1/12/
盒2 & 3个工作很好,但1太高了股利。
我该如何解决这个问题?
* {
margin:0
}
.box {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color:#0f89cf;
height:55px;
width:100%;
padding:5px 0 0 0;
margin-bottom:30px
}
.box img, .box div {
/* float:left; */
display:inline-block;
vertical-align:middle;
margin-left:10px;
}
.box h1 {
color:#fff;
font-size:18px;
margin: 0;
}
.box h1 span {
display:block;
font-size:23px;
}
<div class="is-mobile">
<div class="box">
<img src="http://placehold.it/30x30">
<div>
<h1>Chat to us online now</h1>
</div>
</div>
<div class="box">
<img src="http://placehold.it/30x30">
<div>
<h1>Call the Helpline
<span>101 2333 9302</span></h1>
</div>
</div>
<div class="box">
<img src="http://placehold.it/30x30">
<div>
<h1>Make a General Enquiry
<span>101 2333 9303</span></h1>
</div>
</div>
</div>
看一看我的答案。您不需要打包代码或使用丑陋的表格布局。 ':)' –