最近在做项目的时候,经常会有需要各种居中的情况,现在分享一个最佳实践。

<div class="success-bottom">
        <div class="hr-use"></div>
        <div class="youwant">
            <span class="loveicon"></span>
            <span>你可能还想要</span>
        </div>
        <img src="data:images/active.png" />
    </div>
.success-bottom {
    margin-top: 15px;
    background-color: #fff;
    border-top: 1px solid #c8c8c8;
    position: relative;
}
.success-bottom .loveicon {
    background: url("bgimg/icon-love.png") no-repeat left center;
    display: inline-block;
    width: 25px;
    height: 26px;
    position: absolute;
    background-size: 24px;
}

.success-bottom span:nth-child(2) {
    display: inline-block;
    margin-left: 28px;
    line-height: 28px;
}

.youwant {
    width: 124px;
    height: 36px;
    background-color: #fff;
    z-index:;
    padding-top: 5px;
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.hr-use {
    width: 100%;
    height: 1px;
    border-top: 1px solid #c8c8c8;
    position: absolute;
    top: 18px;
}

其实思路就是让一个Div绝对定位,设置成中线;让另外的内容固定宽度,margin-left: auto; margin-right: auto;  最后再调整下位置就可以达到内容在中间,且在横线中间的效果。

结构-行为-样式-Css Div 居中的一个最佳实践的更多相关文章

  1. 结构-行为-样式-Css笔记

     0.常见的行级元素和块级元素: 行级元素:div,table,form ,ul,ol,p,h1-h6,hr; 块级元素:a,select,input,textarea,img,label,br,i, ...

  2. CSS UNIT 详解以及最佳实践

    分类 ■    绝对长度(Absolute units):cm,mm,in,pt,pc 绝对单位之间的换算:1in = 2.54cm=25.4mm=72pt=6pc 绝对长度在css中的表现和其他地方 ...

  3. 结构-行为-样式-css&html横纵居中最佳实践

    最近在做手机端的H5项目,有个标题是在一根横线中的,就是水平居中加垂直居中(如图一).这应该是前端开发中经常遇到的一个场景了,做的次数多了就有一些体会,我今天就总结了下这种结构的实现思路:首先,用元素 ...

  4. css div居中

    div中没有text-align和vehicle-align这两个属性,所在在css中设置这两个值没有作用 div 水平居中 设置左右边距有auto div{ margin: 0 auto; } 垂直 ...

  5. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

  6. CSS——div居中,window.open(0

    margin:0 auto 表示什么意思?? margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right因为0 auto,表示上下边界为0,左右则根据宽度自适 ...

  7. 自己用jquery+css+div写的一个弹窗

    弹窗支持两种模式,一种是普通信息提示框,调用方法:popup.msgPopup(msg); 另一种是可以加载页面的弹窗,调用方法:popup.pagePopup(url); 效果图: css代码 ;; ...

  8. CSS DIV 居中

    左右居中 margin-left: auto; margin-right: auto; 上下居中

  9. CSS - div居中在屏幕中(水平居中 + 垂直居中)

    方法一代码 <div> <h1>404 Not Found.</h1> </div> <style> div { text-align: c ...

随机推荐

  1. 移动端App混合开发问题 汇总

    1.IOS系统,双击页面,页面会向上移动一节,无法滑动复原. //阻止用户双击放大 var agent = navigator.userAgent.toLowerCase(); //检测是否是ios ...

  2. WIN7远程桌面重启、关机

    在使用远程桌面访问Win7系统时会发现一个小问题,在xp远程桌面中存在的重启和关机菜单在win7远程桌面中不见了,如图: 这也给我们的使用带来了一些小小的麻烦,但实际上微软依然保留了命令行的方式来实现 ...

  3. Springmvc+Spring+Hibernate搭建方法

    Springmvc+Spring+Hibernate搭建方法及example 前面两篇文章,分别介绍了Springmvc和Spring的搭建方法,本文再搭建hibernate,并建立SSH最基本的代码 ...

  4. HDU 2064 汉诺塔III

    汉诺塔III Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  5. 如何把va_list可变参数传送到下一级函数中(如传送到printf)

    最近我在一个LCD上想实现打印格式化字符串的功能,实现这样的功能可有两种方式: 一 最直接的就是自己去解析类似于printf功能的一个函数: 二 比较简单的方法是使用已有的sprintf功能,把格式化 ...

  6. js获取非行间样式或定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  7. SuspendLayout()了解方法

     SuspendLayout()暂时挂起的布局逻辑控制(msdn),它ResumeLayout()在会同.我的理解是,使用SuspendLayout()让整个窗体站,等到所有的东西都设置齐全,然后Re ...

  8. 读书笔记—CLR via C#章节4-7

    前言 这本书这几年零零散散读过两三遍了,作为经典书籍,应该重复读反复读,既然我现在开始写博了,我也准备把以前觉得经典的好书重读细读一遍,并且将笔记整理到博客中,好记性不如烂笔头,同时也在写的过程中也可 ...

  9. 你的flume-ng的第一篇博客

    我在flume-ng 1.1.0 孵化版的时候就开始接触了,自己也搞了一段时间,没事扯扯心得吧. 先说在前面,flume-ng 后面的版本,我没仔细读change log ,比较农民 , 不知道新添了 ...

  10. SQL计算年代差

    1.用datediff函数 select datediff(yyyy,StuBirthday,getdate())>17 2.用year函数 select (year(getdate()-yea ...