在div的中心对齐文本和图像

Question

I have div and two components in it, logo and phone number. I managed to place logo in center of div, but phone number is not exactly in the center:

I want a phone number a little bit (text.height / 2) down. How to do this?

            <div class="payments-mobile-cash-insert-round-corner-div payments-mobile-        cash-insert-number-box">
                <img id="service-logo" src="//:0"
                     data-bind="attr: { src: paymentService.image }"/>
                <span id="phone-number" class="textstyle-4"
                      data-bind="text: infoLines[0].value">
                </span>
            </div>


        .payments-mobile-cash-insert-round-corner-div{
            margin: auto;
            border: 1px solid #dfdfdf;
            border-radius: 7px;
            width: 1170px;
            text-align: center;
        }

        .payments-mobile-cash-insert-number-box {
            height: 196px;
        }

        .payments-mobile-cash-insert-number-box img{
            vertical-align: middle;
        }

        .payments-mobile-cash-insert-number-box span{
            margin-left: 50px;
            font-size: 62px;
            line-height: 196px;
            vertical-align: middle;
        }

Answer 1

Add this code in your css file for the phone number component,

.height{
      padding-top:10px;
      padding-left:5px;
 }

in your html code, add the following line to class attribute section of phone number component,

class="height"

Answer 2

Please try it this css..

   .class
      {
       display: table-cell;
       float: none;
       vertical-align: middle;
      }