我想将所有文本垂直放置在div的中心。
目前，“立即在线上与我们聊天”位于div的顶部。
如何使用我的代码实现这一目标？
小提琴： http : //jsfiddle.net/jL5bpmp1/
* {
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;
margin-left:10px
}
.box h1 {
color:#fff;
font-size:18px
}
.box h1 span {
display:block;
font-size:23px
}<div class="is-mobile">
<div class="box">
<img src="http://placehold.it/50x50">
<div>
<h1>Chat to us online now</h1>
</div>
</div>
<div class="box">
<img src="http://placehold.it/50x50">
<div>
<h1>Call the Helpline
<span>101 2333 9302</span></h1>
</div>
</div>
<div class="box">
<img src="http://placehold.it/50x50">
<div>
<h1>Make a General Enquiry
<span>101 2333 9303</span></h1>
</div>
</div>
</div>我建议使用display:inline-block而不是float:left，然后可以轻松设置垂直对齐值。
.box img, .box div {
display:inline-block;
vertical-align:middle;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句