该方法甚至可以解决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. A Game(洛谷 2734)

    题目背景 有如下一个双人游戏:N(2 <= N <= 100)个正整数的序列放在一个游戏平台上,游戏由玩家1开始,两人轮流从序列的任意一端取一个数,取数后该数字被去掉并累加到本玩家的得分中 ...

  2. jquery遍历不同色彩的li

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 【Java EE 学习 72 上】【数据采集系统第四天】【增加调查logo】【文件上传】【动态错误页指定】【上传限制】【国际化】

    增加logo的技术点:文件上传,国际化 文件上传的功能在struts2中是使用文件上传拦截器完成的. 1.首先需要在页面上添加一个文件上传的超链接. 点击该超链接能够跳转到文件上传页面.我给该表单页面 ...

  4. 网站跨站点脚本,Sql注入等攻击的处理

    从360安全论坛里找到的一段代码,经过整理封装,直接在站点Global.asax文件或写一个HttpModule来拦截恶意请求即可: http://bbs.webscan.360.cn/forum.p ...

  5. ArrayList常用操作

    List使用: package com.collection.list; import java.util.ArrayList; import java.util.Arrays; import jav ...

  6. 【iOS】Jenkins Gitlab持续集成打包平台搭建

    Jenkins Gitlab持续集成打包平台搭建 SkySeraph July. 18th 2016 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点: ...

  7. 深信服务发布SSL站点

    1.不能使用AD自带的HTTPS服务,需要新建一个服务,端口443 2.在“节点池”中添加内网HTTPS服务器的IP,端口443 3.在“策略”中新建一条策略,"服务"选新添加的端 ...

  8. MSP430FR4133/4131/4132单片机破解芯片解密多少钱?

    德州仪器MSP430FR4133/4131/4132单片机破解芯片解密多少钱? MSP430FR4133.MSP430FR4131.MSP430FR4132 ####[微信:icpojie]#### ...

  9. Linux学习笔记(10)-信号

    所谓信号(singal),在我的理解来说,其实和单片机开发中的中断差不多,但是它并非是由系统硬件所提供的,而是软件操作系统的支持的一种提醒机制. 收到信号之后的处理方法,一般由三种: (1)第一种是类 ...

  10. NPM 使用淘宝镜像

    --registry https://registry.npm.taobao.org