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

Question

我有div和两个组件，徽标和电话号码。我设法将logo放在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;
      }