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。