在div的中心對齊文本和圖像

Question

我有div和兩個組成部分，徽標和電話號碼。 我設法將徽標放置在div的中心，但電話號碼不完全位於div的中心：

我想要一個電話號碼（text.height / 2）下來。 這個怎么做？

            <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

在您的css文件中為電話號碼組件添加此代碼，

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

在您的html代碼中，將以下行添加到電話號碼組件的class屬性部分，

class="height"

Answer 2

請嘗試此CSS。

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