该方法甚至可以解决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. from表单如果未指定action,submit提交时候会执行当前url

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  2. 简单的ADO.NET连接数据小样例

    ADO.NET连接数据库的样例如下: using System; using System.Collections.Generic; using System.ComponentModel; usin ...

  3. MySQL延迟复制--percona-toolkit和MASTER TO MASTER_DELAY

    为了数据的安全,有的时候数据库需要延迟备份,这里说下两种延迟备份的方法. 一.借助工具. 实现环境: 192.168.189.143 (mysql主库) 192.168.189.144 (mysql备 ...

  4. 【修改 UITextField 中 placeholder 的顏色】

    第一种方法: [textfeild setValue:[UIColor redColor] forKeyPath:@"_placeholderLabel.textColor"]; ...

  5. 当攻击者熟读兵法,Camouflage病毒实战演示暗度陈仓之计

    "明修栈道,暗度陈仓"的典故许多人都听说过,该典故出自楚汉争霸时期,刘邦意图进入关中,需要攻下关中咽喉之地--陈仓.韩信献出一计:表面上浩浩荡荡地修复通往陈仓的栈道以迷惑陈仓守将, ...

  6. oracle对/dev/shm的使用

    查看共享内存打开的文件数 [root@db2 ~]# lsof -n | grep /dev/shm | wc -l 34693 共享内存中总共文件数 [root@db2 ~]# ls -l /dev ...

  7. python访问MS SqlServer(通过pyodbc)

    #!/usr/bin/env python # -*- coding: utf-8 -*- import pyodbc class MSSQL: """ 封装pyodbc ...

  8. RabbitMQ的几种应用场景

    RabbitMQ是一个消息代理,从“生产者”接收消息并传递消息至“消费者”,期间可根据规则路由.缓存.持久化消息.“生产者”也即message发送者以下简称P,相对应的“消费者”乃message接收者 ...

  9. make: *** [out/host/linux-x86/obj/EXECUTABLES/obbtool_intermediates/Main.o] Error 1

    在ubuntu12.04下编译android时,若出现如此错误,那是因为gcc版本太高. 通过gcc -v命令可以发现gcc库在/usr/lib/gcc/i686-linux-gnu目录下,该目录下有 ...

  10. Linux内核:kthread_create(线程)、SLEEP_MILLI_SEC

    转自:http://blog.csdn.net/guowenyan001/article/details/39230181 一.代码 #include <linux/module.h> # ...