一般让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。

span 不使用float 靠右对齐且垂直居中的更多相关文章

  1. LI 标签中让文章标题左对齐,日期右对齐的方法

    希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html  ...

  2. 基于div表单模拟右对齐

    基于div表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...

  3. [No000089]String的(补空位)左对齐,(补空位)右对齐

    using System; namespace Chinese中文排序Sort { internal class Program { /// <summary> /// 取子字符串 /// ...

  4. bootstrap——下拉菜单右对齐

    通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单. Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropd ...

  5. placeholder右对齐的写法,兼容性比较高的一种方法

    placeholder右对齐的写法,如果你不考虑移动端的话,完全可以使用text-align:right,不过如果考虑移动端的话,在有一些手机上,即使你写了text-align:right,place ...

  6. Word论文写作如何实现公式居中、编号右对齐

    第一步:插入表格 在公式所在行居中插入一行三列的表格,具体操作为: a.设置行居中,快捷键Ctrl+E: b.插入->表格->3×1的表格: 2 第二步:修改表格属性 新插入的表格三列等宽 ...

  7. 解决LinearLayout中控件不能居右对齐

    转载自:http://lgb168.blog.163.com/blog/static/49674438201172492935235/ 2011-08-24 21:35:25|  分类: Androi ...

  8. 解决statusStrip控件上的项目不能靠右对齐的问题

    在c#中用到了状态栏控件StatusStrip,但当我想把StatusStrip上某个StatusLabel靠右对齐时出了问题. 按照MSDN中的办法,是设置ToolStripStatusLabel的 ...

  9. [转]解决LinearLayout中控件不能居右对齐

    在LinearLayout布局时使用右对齐(android:layout_gravity="right")控件对齐方式不生效,需要设置 android:layout_weight= ...

随机推荐

  1. Newtonsoft.Json.Linq.JObject 遍历验证每个属性内容

    业务需求,拦截器验证每个请求inputstream(实际是application/json流)的数据,但是json反序列化实体格式不同. var req = filterContext.Request ...

  2. 深入理解jvm--性能监控工具

    1.jvm监控工具介绍 1.1.jconsole JConsole是一个基于JMX的GUI工具,用于连接正在运行的JVM,不过此JVM需要使用可管理的模式启动. 1.2.启动jconsole 通过JD ...

  3. 我的oracle 健康检查报告

    最近一直想用sql来生成oracle的健康检查报告,这样看起来一目了然,经过网上搜资料加自己整理终于算是成型了,部分结果如下图所示, 具体参考附件,恳请广大网友看看是否还有需要添加的地方. DB_he ...

  4. 使用IDEA运行项目时提示:Warning:java: 源值1.5已过时, 将在未来所有发行版中删除

    如图 在使用IDEA运行项目时,在下方提示:Warning:java: 源值1.5已过时, 将在未来所有发行版中删除 这是因为JDK版本问题 解决方法如下:左上角 file ——> Projec ...

  5. java实现mysql数据备份

    /** * @param hostIP ip地址,可以是本机也可以是远程 * @param userName 数据库的用户名 * @param password 数据库的密码 * @param sav ...

  6. day 04作业

    目录 简述Python的五大数据类型的作用.定义方式.使用方法: 数字类型 字符串类型(str) 列表(list) 字典(dict) 布尔型(bool) 一行代码实现下述代码实现的功能: 写出两种交换 ...

  7. Linux忘记root密码,进入单用户模式,切换运行级别,切换用户

    切换用户指令 su - 用户名 当高权限用户切换到低权限用户的时候不需要密码 反之低权限切换到高权限用户需要高权限用户的密码 用exit可以退出当前用户,回到上一个用户 而且它的退出是一层一层退出的: ...

  8. SpringCloud2.0 Hystrix Ribbon 基于Ribbon实现断路器 基础教程(六)

    1.启动[服务中心]集群,工程名:springcloud-eureka-server 参考 SpringCloud2.0 Eureka Server 服务中心 基础教程(二) 2.启动[服务提供者]集 ...

  9. Java调用Kotlin程序深度解析

    异常: 在之前我们已经学习在Kotlin中的所有异常都是运行期的,而不像Java分为运行期和非运行期,下面用代码来演示一下,先建一个Java的异常: 然后在Kotlin中来调用一下该Java中的方法 ...

  10. 软帝学院教你java命名规范法则

    java命名规范法则大全 在我们在刚开始学习java的时候,给包.类.方法等命名的时候总是取名不规范,大多都是随便取的,对于一个专业的程序员来说.命名规范化也是必不可少的.命名规范的话能够在编码过程中 ...