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= ...
随机推荐
- Matlab原型模式
原型(Prototype)模式的定义如下:用一个已经创建的实例作为原型,通过复制该原型对象来创建一个和原型相同或相似的新对象.Matlab面向对象编程有两种类,一种是Value Class,一种是Ha ...
- 【转载】C#中List集合使用Min()方法查找到最小值
在C#的List集合操作中,有时候需要查找到List集合中的最小值,此时可以使用List集合的扩展方法Min方法,Min方法有2种形式,一种是不带任何参数的形式,适用于一些值类型变量的List集合,另 ...
- Flask 和 Django 框架的区别
1)Flask Flask确实很“轻”,不愧是Micro Framework,从Django转向Flask的开发者一定会如此感慨,除非二者均为深入使用过 Flask自由.灵活,可扩展性强,第三方库的选 ...
- linux上SVN出现 "Unable to connect to a repository at URL 'svn://xx.xx.xx.xx/xxx' 和 No repository ...
centos上安装了svn, 有时候会不知道什么原因出现客户端小乌龟无法连接或无法提交等情况. 1. 万能重启,xshell连接服务器,输入 service svnserve restart 命令. ...
- java系统化基础-day01-基础语法知识
1.学前必看 该课程将系统化的讲解java基础,但是该课程并不适合零基础的学员,因为在整个java学习体系中我们是按照实际生产设计, 主体思路是以完成某个业务为主线,用到什么技术就学什么技术,即带着问 ...
- springmvc跨域问题的解决
如果只想对某个方法开启跨域设置: controller上添加注解: @CrossOrigin(maxAge = 3600) 在特定的方法上添加注解: @CrossOrigin("*" ...
- PHP 根据配置转换数组中的键名 方便给前端的时候改键名
/** * 根据配置转换数组中的键名 * @param array $data 数据,必须为二维数组格式 [0=>[]] * @param array $keyNameMapArr 键名转换配置 ...
- Jupyter Notebook修改默认的工作目录
Jupyter Notebook修改默认的工作目录 方法1:通过配置文件修改 只适合从命令行启动notebook生成配置文件,如果你已经在windows环境变量中设置好了jupyter noteboo ...
- golang方法和接口
一. go方法 go方法:在函数的func和函数名间增加一个特殊的接收器类型,接收器可以是结构体类型或非结构体类型.接收器可以在方法内部访问.创建一个接收器类型为Type的methodName方法. ...
- Linux命令——gdisk、fdisk、partprobe
gdisk.fdisk MBR分区表请使用fdisk分区,GPT分区表请使用gdisk分区 MBR与GPT区别参考:Linux磁盘管理——MBR 与 GPT gdisk.gdisk这两个命令参数不需要 ...