一般让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. centos7安装face_recognition踩各种坑

    要在阿里云服务器上部署face_recognition.用的是centos7.  千辛万苦啊.感谢网上的各种解答.回报社会,我也把各种坑写下了.整理的有点乱.不过仔细看,有干货的. 感谢这个博主Fat ...

  2. SQL server 2008数据库的备份与还原(亲测,效果良好)注意采用单用户模式呀

    .SQL数据库的备份: 1.依次打开 开始菜单 → 程序 → Microsoft SQL Server 2008 → SQL Server Management Studio → 数据库:Dsidea ...

  3. VUE基础回顾6

    1.ref ref可以直接访问元素,而不需要使用querySelector或者其他dom节点的原生方法. <div ref = "box"></div> 在 ...

  4. Python爬虫系列:五、正则表达式

    1.了解正则表达式 正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. 正则表达式 ...

  5. 【转】SetWindowText 的用法

    SetWindowTextW表示设置的字符串是WCHAR (双字节字符 )SetWindowTextA表示设置的字符串是CHAR (单字节字符 )SetWindowText表示设置的字符串是自动匹配当 ...

  6. php审核流程详解

    在公司运营中,人员的变动及请假.离职情况都很普遍,这就需要有一个管理系统来系统的做一套流程,可以提升工作效率节省时间.在流程中需要有顺序的进行提交审核,接下来我们做一套简单的新建流程以及提交审核的系统 ...

  7. 什么影响了mysql的性能-存储引擎层

    5.6版本以前默认是MyISam存储引擎,5.6版本之后默认支持的Innodb存储引擎,这两种也是最常用的. 存储引擎层 MyISAM 5.5之前版本默认存储引擎 存储引擎表由MYD和MYI组成 特性 ...

  8. TensorFlow 2 快速教程,初学者入门必备

    TensorFlow 2 简介 TensorFlow 是由谷歌在 2015 年 11 月发布的深度学习开源工具,我们可以用它来快速构建深度神经网络,并训练深度学习模型.运用 TensorFlow 及其 ...

  9. Python_正则表达式语法

    1.正则表达式中的操作符: 2.re库的使用: import re #search方法要求只要待匹配的字符串中包含正则表达式中的字符串就可以 match = re.search('python+',' ...

  10. MySQL/MariaDB数据库的函数

      MySQL/MariaDB数据库的函数 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. MySQL/MariaDB数据库的函数分为系统函数和用户自定义函数(user-define ...