一般让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. html5的基本介绍

    前言 (1)什么是HTML? 指超文本标记语言(Hyper Text Markup Language); 是用来描述网页的一种语言: 不是编程语言,是一种标记语言: (更多详细内容,百度:https: ...

  2. Firebird 事务隔离级别

    各种RDBMS事务隔离都差不多,Firebird 中大致分为3类: CONCURRENCY.READ_COMMITTED.CONSISTENCY. 在提供的数据库驱动里可设置的事务隔离级别大致如下3类 ...

  3. php在虚拟机和windows上的应用

    学习目标:linux+apache+php合在一起的应用                在windows中三者的的关联及应用 php是apache的一个外挂程序,必须依靠web服务器才可以运行.当客户 ...

  4. MySQL存储过程01

    过程:封装了若干条语句,调用时,这些封装体执行 函数:是一个由返回值的’过程‘ 过程是没有返回值的函数 我们把若干条sql封装起来,起个名字---过程 把此过程存储在数据库中------存储过程 存储 ...

  5. CentOS环境安装python3,pip

    安装python3(编译安装) 1. 下载python安装包到指定目录 cd /usr/local/src 这里的目录如果不存在可以自己建,当然也可以自己放在自己想放的位置,只要等会儿安装的时候能找到 ...

  6. ServicePoint 类

    地址:https://docs.microsoft.com/zh-cn/dotnet/api/system.net.servicepoint?view=netframework-4.7.2 提供 HT ...

  7. 使用laravel jwt-auth post提交数据一直出现 'error' => 'invalid_credentials'

    注意,laravel 对密码使用Hash加密,检查一下数据库user表中的password有没有Hash加密过 没仔细看文档坑死我了

  8. Tulip Festival(线段树+二分+CDQ+带修改莫队+树套树)

    题目链接 传送门 线段树\(+\)二分思路 思路 比赛看到这题时感觉是一棵线段树\(+\)主席树,然后因为不会带修改主席树就放弃了,最后发现还卡了树套树. 由于本题数据保证序列中相同的数字不会超过20 ...

  9. Python基础初始之二

    1.格式化的输出 当你遇到这样的需要:字符串中想让某些位置变成动态可传入的,首先考虑用格式化输出 1.格式化输出:% 2. 格式化输出:format 3. 格式化输出:f 2.运算符 3.编码 待续

  10. spring配置文件ApplicationContext.xml里面class等没有提示功能

    实现效果: 解决方法: windows–>preference—>myeclipse—>files and editors–>xml—>xmlcatalog 点击add ...