使用CSS在div中垂直居中放置文本

Question

I'd like to position all my text vertically centered within the div.

Currently 'Chat to us online now' is at the top of the div.

How do I achieve this using my code?

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

Answer 1

I suggest to use display:inline-block instead of float:left , then you can set up the vertical align value easily.

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

jsfiddle

Answer 2

You can use this common vertical centering method:

.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

If your browser support is IE10+ you can use flex-box. You just need to add 2 lines:

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

I also added padding: 0; as you don't need that now you're using flex-box. Welcome to the future. The best place to learn about flexbox is here:

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