一般让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. JDBC模糊查询的4种方式

    1:%放在占位符中              parameters.add("%"+familyMemberQueryBean.getFullName()+"%" ...

  2. jQuery-使页面回到顶部

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Hybris产品主数据的价格折扣维护

    登录Hybris backoffice的产品管理界面,进入price标签页,点击Create new Discount Row按钮: 在Discount下拉地段里选择10%的折扣,这个产品原来的单价是 ...

  4. 异常详细信息: System.MissingMethodException: 无法创建抽象类。

    asp.net mvc 在使用post向后端传送json数据时报异常,在路由配置中添加如下即可 public static void RegisterRoutes(RouteCollection ro ...

  5. Python的路径操作(os模块与pathlib模块)

    Python的路径操作(os模块与pathlib模块) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.os.path模块(Python 3.4版本之前推荐使用该模块) #!/u ...

  6. ansible中的常用循环模块with_items

    ansible中的循环模块有很多,不过with_items最为常用,且较为简单,循环模块最多的功能就是将重复性的任务简单化,如下例子所示: - hosts: all remote_user: root ...

  7. 洛谷 P1443 马的遍历题解

    题目链接:https://www.luogu.org/problem/P1443 题目描述 有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个 ...

  8. selenium常用的API(七)判断元素是否可见

    web页面不可见的元素虽不在页面上显示,但是存在于DOM树中,这些元素webdriver也能找到. element.is_displayed()方法可以判断元素是否在页面上显示,如果显示返回True, ...

  9. python的pandas库读取csv

    首先建立test.csv原始数据,内容如下 时间,地点 一月,北京 二月,上海 三月,广东 四月,深圳 五月,河南 六月,郑州 七月,新密 八月,大连 九月,盘锦 十月,沈阳 十一月,武汉 十二月,南 ...

  10. spring的声明式事务和编程式事务

    事务管理对于企业应用来说是至关重要的,当出现异常情况时,它可以保证数据的一致性. Spring事务管理的两种方式 1.编程式事务 使用Transaction Ttempleate或者直接使用底层的Pl ...