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。
span 不使用float 靠右对齐且垂直居中的更多相关文章
- LI 标签中让文章标题左对齐,日期右对齐的方法
希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html ...
- 基于div表单模拟右对齐
基于div表单模拟右对齐 --------------------------------------------------------- ----------------------------- ...
- [No000089]String的(补空位)左对齐,(补空位)右对齐
using System; namespace Chinese中文排序Sort { internal class Program { /// <summary> /// 取子字符串 /// ...
- bootstrap——下拉菜单右对齐
通过向 .dropdown-menu 添加 .pull-right 类来向右对齐下拉菜单. Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropd ...
- placeholder右对齐的写法,兼容性比较高的一种方法
placeholder右对齐的写法,如果你不考虑移动端的话,完全可以使用text-align:right,不过如果考虑移动端的话,在有一些手机上,即使你写了text-align:right,place ...
- Word论文写作如何实现公式居中、编号右对齐
第一步:插入表格 在公式所在行居中插入一行三列的表格,具体操作为: a.设置行居中,快捷键Ctrl+E: b.插入->表格->3×1的表格: 2 第二步:修改表格属性 新插入的表格三列等宽 ...
- 解决LinearLayout中控件不能居右对齐
转载自:http://lgb168.blog.163.com/blog/static/49674438201172492935235/ 2011-08-24 21:35:25| 分类: Androi ...
- 解决statusStrip控件上的项目不能靠右对齐的问题
在c#中用到了状态栏控件StatusStrip,但当我想把StatusStrip上某个StatusLabel靠右对齐时出了问题. 按照MSDN中的办法,是设置ToolStripStatusLabel的 ...
- [转]解决LinearLayout中控件不能居右对齐
在LinearLayout布局时使用右对齐(android:layout_gravity="right")控件对齐方式不生效,需要设置 android:layout_weight= ...
随机推荐
- 要想获取select的值,使用ng-modle,否则无法获取select 的值
ng-bind是从$scope -> view的单向绑定 ng-modle是$scope <-> view的双向绑定 <form role="form" c ...
- 【转载】C#使用ToList()将数组快速转换为List集合
在C#的编程中,数组和List集合是比较常用的两个集合类,有时候因为业务需要,需要将数组集合转换为List集合,此时就可以使用C#中的Linq的扩展方法ToList方法来实现,只需要简单的一条语句即可 ...
- .python3基础之“术语表(1)”
1.注释: 行首有一特殊标志符号运行时告知编程忽略此行:使代码更易于阅读. 例如: #这是一个注释 print("hello world") #print() 方法用于打印输出,p ...
- ES6 新增集合----- Set 和Map
Sets 和数组一样,都是一些有序值的的集合,但是Sets 和数组又有所不同,首先Sets 集合中不能存有相同的值,如果你向Sets 添加重复的值,它会忽略掉, 其次Sets 集合的作用也有所不同,它 ...
- Vue学习之项目部分代码(十八)
1.mian.js: // 入口文件 import Vue from "vue"; // 1.1导入路由 import VueRouter from "vue-route ...
- 修改Nodejs内置的npm默认配置路径方法
Nodejs 内置的npm默认会把模块安装在c盘的用户AppData目录下(吐槽一下:不明白为啥现在的软件都喜欢把资源装在这里) C盘这么小,肯定是不行的,下面一步步修改到D盘 1.打开cmd命令行, ...
- Oracle 数据类型比较规则
数值 较大的值被认为大于较小的值.所有负数都小于零,所有正数都小于零.因此,-1小于100:-100小于-1. 浮点值NaN(not a number))大于任何其他数值,且等于自身. 日期时间值 较 ...
- manjaro跳坑记
why manjaro 有两个原因: 我的电脑上win10+ubuntu16.04,ubuntu上跑一个程序会crash导致重启,不知道如何排查,想换个系统试试.(别人机器上同样G++版本不会cras ...
- Docker03-安装Docker运行环境
目录 Ubuntu 18 中安装Docker 查看Docker安装信息 查看Docker版本,命令:docker version 查看Docker运行信息,命令: docker info 检查安装是否 ...
- Python入门篇-数据结构堆排序Heap Sort
Python入门篇-数据结构堆排序Heap Sort 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.堆Heap 堆是一个完全二叉树 每个非叶子结点都要大于或者等于其左右孩子结点 ...