zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    14.RabbitMQ
    13.跨域
    12.EF
    11.Redis
    GitHub获取用户ID
    10.AOP
    第26节课:pytest结合Allure操作
    第25节课:pytest测试框架
    第二十四节课:requests爬虫实战
    第二十三节课:正则表达式re模块:
  • 原文地址:https://www.cnblogs.com/ming-os9/p/10654476.html
Copyright © 2011-2022 走看看