使用CSS将文本垂直居中在div中

Question

我希望将我的所有文字垂直居中放在div中。

目前正在线上与我们在线聊天＆＃39;是在div的顶部。

如何使用我的代码实现此目的？

小提琴： http://jsfiddle.net/jL5bpmp1/

＆＃13;

＆＃13;

* {
    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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我建议使用display:inline-block代替float:left，然后您可以轻松设置垂直对齐值。

.box img, .box div {
    display:inline-block;
    vertical-align:middle;
}

<强> jsfiddle

Answer 2

您可以使用这种常见的垂直居中方法：

.box div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

* {
    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
}

.box div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<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>

Answer 3

如果您的浏览器支持是IE10 +，您可以使用flex-box。你只需要添加两行：

.box {
    display: flex;
    align-items: center;
    padding: 0;
}

我还添加了padding: 0;，因为您现在不需要使用flex-box。欢迎来到未来。了解flexbox的最佳地点是：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/