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

时间 2019-11-10

标签 span 不使 float 靠右对齐垂直居中栏目 CSS 繁體版

原文原文链接

通常让div 里的span 靠右对齐用的方法比较多的是float：right。php

此次因为各类缘由我不想用floaturl

先看效果：spa

HTML 部分code

    <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 部分blog

.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；it

goto-span（子元素的wrap）的position：absolute；right：50px；io

check（子元素）vertical-align：middle。class