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= ...
随机推荐
- 换个语言学一下 Golang (6)——控制流程
Go语言的控制结构关键字只有if..else if..else ,for 和 switch. 而且在Go中,为了避免格式化战争,对程序结构做了统一的强制的规定.看下下面的例子. 请比较一下A程序和B程 ...
- Mysql把一个表的数据写入另一个表中
一.表结构一样 insert into 表1 select * from 表2 二. 表结构不一样或者取部分列 insert into 表1 (列名1,列名2,列名3) select 列1,列2,列3 ...
- Matlab适配器模式
适配器模式是连接两个不兼容接口的桥梁,主要分为三种:类适配器.对象适配器以及接口适配器,本文根据https://blog.csdn.net/u012359453/article/details/791 ...
- celery 定时任务,使用crontab表达式不执行(版本4.3.x)
celery 定时任务,使用crontab表达式不执行(版本4.3.x) 在使用celery 执行定时任务时,发现任务不会执行,schedule设置如下: 经测试,如果去掉hour,则任务每分钟都会执 ...
- redhat7.2下VNC没法显示图像
1,Symptom /root/.vnc/HR-ECC-PRD-02:1.log内容有信息如下: VNCSconnST: Server default pixel fromat depth 24 (3 ...
- java-springCloud环境配置
SpringCloud注解和配置以及pom依赖说明 https://www.cnblogs.com/zhuwenjoyce/p/9663324.html https://blog.csdn.net/s ...
- css浮动float详解
https://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html
- 浅谈HTTP中Get与Post的区别【转】
转自http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html#commentform 感谢LZ分享 Http定义了与服务器交互的不同方法 ...
- windows下控制台程序实现窗口显示
windows下实现窗口显示,如果限定是C/C++语言,并且是原生Windows支持,需要使用GDI或GDI+.一般是在Visual Studio里新建Win32应用程序,而不是Win32 conso ...
- 串口通信编程向导 Serial Programming Guide for POSIX Operating Systems
https://www.cmrr.umn.edu/~strupp/serial.html#CONTENTS Introduction Chapter 1, Basics of Serial Commu ...