span 不使用float 靠右对齐且垂直居中

一般让div 里的span 靠右对齐用的方法比较多的是float:right。

这次由于各种原因我不想用float

先看效果:

HTML 部分

    <div class="customer-block">
        <span class="phone-num">400-888-8888</span>
        <span class="open-time">周一至周五9:00-18:00</span>
        <span class="goto-span">
            <img class="check" src="<?php echo static_url_res(); ?>/image/goto.png">
        </span>
    </div>

CSS 部分

.customer-block{
    width:994px;
    margin:0 auto;
    border: 2px solid #000;
    box-sizing: border-box;
    line-height: 155px;
    position: relative;
}
.phone-num{
    margin-left: 50px;
    font-size: 44px;
    color: #000;
    vertical-align: middle;
}
.open-time{
    margin-left: 50px;
    font-size: 34px;
    color: #818181;
    vertical-align: middle;
}
.goto-span{
    display: inline-block;
    position: absolute;
    right: 50px;
}
.check{
    vertical-align: middle;
}

通过设置customer-block(父容器)的position:relative;line-height:155px;

goto-span(子元素的wrap)的position:absolute;right:50px;

check(子元素)vertical-align:middle。

原文地址:https://www.cnblogs.com/ming-os9/p/10654476.html