Question

我有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="height"

Answer 2

请尝试这个css ..

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

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

2 个答案: