该方法甚至可以解决img内容居中的问题

套路:最外层div宽度为居中内容所占的宽度(通常是1170px),并且使其居中(margin:auto)

里层的div宽度为全屏(通常是1920px;)再margin-left:-368px   该值等于(1170-1920) / 2 = 375px ,然而实战的时候也会有偏差。所以不一定规定死。

原理暂时理不清。具体操作如下:

html:

<div class="my-slider-li-imgdiv">
<div class="my-slider-li-imgdiv-inner">
<img src="http://images.weicantimes.com/banner-1.jpg" alt="更智能的餐饮信息化管理系统,客户回流、高效推广、轻松管理、智慧运营" />
</div>
</div>

css:

.my-slider-li-imgdiv{         width:1170px;margin: auto;    }
.my-slider-li-imgdiv-inner{ width:1920px; margin-left: -368px; }

温故而知新 css + html 超级牛逼的居中策略的更多相关文章

  1. IntelliJ IDEA 15款 神级超级牛逼插件推荐(超赞,谁用谁知道)

    满满的都是干货  所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的敲击 ...

  2. Animate.css 一款牛逼的css3动画库

    Animate.css是一款很牛逼的,跨浏览器的css3动画库,使用方法也很简单只要引入一个animate.min.css就可以了, 简单使用 1 首先引入 animate的 css 文件样式 cdn ...

  3. 发现XMind一个超级牛逼的功能

    本来想要自己手动建立下文件夹的结构图,一不小心发现了一个大惊喜. 比如想要看一下360Downloads文件夹下的文件结构,可以先创建一个名叫360Downloads的主节点,然后把其文件夹下的文件直 ...

  4. 关于HTML5,最牛逼的10本书!

    关于HTML5,最牛逼的10本书! 关于HTML5,最牛逼的10本书.rar HTML5+CSS3从入门到精通 李东博 著 推荐指数:★★★☆ 简介:本书通过基础知识+中小实例+综合案例的方式,讲述了 ...

  5. 不用 Notepad++,还有更牛逼的选择!

    来源:oschina.net/news/110987/no-notepad-plus-plus 这两天 Notepad++ 牛逼了,然后引发了大家的关注,具体事件内容请大家自行百度,其实作为文本编辑工 ...

  6. 为什么我会认为SAP是世界上最好用最牛逼的ERP系统,没有之一?

    为什么我认为SAP是世界上最好用最牛逼的ERP系统,没有之一?玩过QAD.Tiptop.用友等产品,深深觉得SAP是贵的有道理! 一套好的ERP系统,不仅能够最大程度承接适配企业的管理和业务流程,在技 ...

  7. 我喜欢ASP.NET的MVC因为它牛逼的9大理由(转载)

    我很早就关注ASP.NET的mvc的,因为最开始是学了Java的MVC,由于工作的原因一直在做.Net开发,最近的几个新项目我采用了MVC做了,我个一直都非常喜欢.Net的MVC.我们为什么使用MVC ...

  8. 最牛逼android上的图表库MpChart(三) 条形图

    最牛逼android上的图表库MpChart三 条形图 BarChart条形图介绍 BarChart条形图实例 BarChart效果 最牛逼android上的图表库MpChart(三) 条形图 最近工 ...

  9. 最牛逼android上的图表库MpChart(二) 折线图

    最牛逼android上的图表库MpChart二 折线图 MpChart折线图介绍 MpChart折线图实例 MpChart效果 最牛逼android上的图表库MpChart(二) 折线图 最近工作中, ...

随机推荐

  1. QT插件使用

    1基本插件制作流程 1) 定义接口.接口定义为抽象基类,如IPluginInterface,实现高度封装.定义的头文件在最后需要通过Q_DECLARE_INTERFACE来唯一标识该接口,即通过一个全 ...

  2. 数据复制与AA双活(1)

    最开始有些概念需要弄明白: 1. 什么是RPO? Wiki: https://en.wikipedia.org/wiki/Recovery_point_objective A recovery poi ...

  3. QT编译时 cc1plus进程占用大量内存卡死问题解决

    QT5.7 做一个demo编译时,内存几乎完全消耗,卡死.经尝试发现是添加资源文件过大导致(不知是单个文件过大触发还是文件总共过大触发)的.我的资源文件工136M,单个最大是125M左右. 解决方法是 ...

  4. Python-Hello world!

    一.Python安装 Windows 1.下载安装包 https://www.python.org/downloads/ 2.安装 默认安装路径:C:\python3.5 3.配置环境变量: [右键计 ...

  5. Android 利用ImageView显示图片

    Author: Maddock Date: 2015-07-21 因为做算法demo的需要,开发一点安卓的程序. 需求:获取UI中图像中某点的坐标. 参考:http://longshuai2007.b ...

  6. Axure 自适应视图

    假设B为A的子视图 继承: A更新 文字内容.交互事件.禁用: 位置.尺寸.样式.交互样式 时, B都会继承响应更新变化 B更新 文字内容.交互事件.禁用时,A也会更新 B更新 位置.尺寸.样式.交互 ...

  7. Zookeeper操作

    Zookeeper操作 注意搭建: 1.集群规模不小于3个节点 2.服务器之间系统时间要保持一致 1.搭建步骤: 1.解压安装包 2.设置zookeeper环境变量 3.修改配置文件————zoo.c ...

  8. MIT 6.828 JOS学习笔记16. Lab 2.2

    Part 3 Kernel Address Space JOS把32位线性地址虚拟空间划分成两个部分.其中用户环境(进程运行环境)通常占据低地址的那部分,叫用户地址空间.而操作系统内核总是占据高地址的 ...

  9. windows下node环境配置

    1.在node官网上下载合适版本的node安装包,官网地址:http://nodejs.org/#download:我下载的6.5最新版本: 2.安装node,都是系统默认的,一直安装下去: 3.在c ...

  10. POJ 3415 Common Substrings ——后缀数组

    [题目分析] 判断有多少个长度不小于k的相同子串的数目. N^2显然是可以做到的. 其实可以维护一个关于height的单调栈,统计一下贡献,就可以了. 其实还是挺难写的OTZ. [代码] #inclu ...