一般让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. 两个数组的交集 II

    题纲 给定两个数组,编写一个函数来计算它们的交集. 示例 : 输入: nums1 = [4,9,5], nums2 = [9,4,9,8,4] 输出: [4,9] 说明: 输出结果中每个元素出现的次数 ...

  2. 车间管理难?APS系统为你智能排程

    对 APS系统不熟或者不了解他的一些运行规则也是在实施项目中导致经常不能正常运行不可忽视的因素,对 APS系统的早期了解是整个项目实施运行的成功至关重要的因素. 如果不了解 APS潜在的因素和运行准则 ...

  3. CentOS 使用163yum源

    下载163源 # wget http://mirrors.163.com/.help/CentOS7-Base-163.repo 如果报以下错误 -bash: wget: command not fo ...

  4. Docker镜像管理基础篇

    Docker镜像管理基础篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Docker Images Docker镜像还有启动容器所需要的文件系统及其内容,因此,其用于创建并启 ...

  5. 在k8s集群部署SonarQube

    目录 1.2.存储环境 1.3.sonarqube版本 2.部署sonarqube 2.1.部署PostgreSQL 2.2.部署SonarQube 2.3.访问检查 SonarQube 是一款用于代 ...

  6. python基础---python基础语法

    1.常用符号 逗号,枚举:一个函数有多个参数sum(1,2) 等于,赋值:把一个值,给一个变量,a=1 括号,函数的参数部分sum(x,y) 冒号,一个子过程的开始 双引号/单引号:表示字符串 运算符 ...

  7. Hibernate的悲观锁和乐观锁

    前一篇博客我们从数据库角度分析,锁可以分为三种,分别为共享锁,独占锁和更新锁.我们从程序的角度来看锁可以分为两种类型,悲观锁和乐观锁,Hibernate提供对这两种锁 的支持,我们来了解一下Hiber ...

  8. map_multimap

    #include<iostream> #include<string> #include<map> using namespace std; struct Self ...

  9. postgres linux系统下连接方法

    psql -U 用户名 -h ip  -p 端口号 -w 库名称 查询实例下的数据结构 语法:select 字段名  from  实例名“.”表名(account.tb_user) 如:  selec ...

  10. 编程用泰勒公式求e的近似值,直到最后一项小于10的负6次方为止。

    #include<stdio.h>#include<math.h>void main(){ int n; float j=1.0,sum=1.0; for(n=1;;n++) ...