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。

  • 相关阅读:
    事件的基本概念
    c# 语法 字符串内插
    tcp 的编程例子
    Action 语法的简介
    wcf 的小介绍
    Socket编程
    c# base new 等关键字基础
    虚函数和继承的关系
    arraylist,list ,数组区别
    Python爬虫-selenium模拟豆瓣电影鼠标下拉
  • 原文地址:https://www.cnblogs.com/ming-os9/p/10654476.html
Copyright © 2011-2022 走看看