温故而知新 css + html 超级牛逼的居中策略
该方法甚至可以解决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 超级牛逼的居中策略的更多相关文章
- IntelliJ IDEA 15款 神级超级牛逼插件推荐(超赞,谁用谁知道)
满满的都是干货 所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的敲击 ...
- Animate.css 一款牛逼的css3动画库
Animate.css是一款很牛逼的,跨浏览器的css3动画库,使用方法也很简单只要引入一个animate.min.css就可以了, 简单使用 1 首先引入 animate的 css 文件样式 cdn ...
- 发现XMind一个超级牛逼的功能
本来想要自己手动建立下文件夹的结构图,一不小心发现了一个大惊喜. 比如想要看一下360Downloads文件夹下的文件结构,可以先创建一个名叫360Downloads的主节点,然后把其文件夹下的文件直 ...
- 关于HTML5,最牛逼的10本书!
关于HTML5,最牛逼的10本书! 关于HTML5,最牛逼的10本书.rar HTML5+CSS3从入门到精通 李东博 著 推荐指数:★★★☆ 简介:本书通过基础知识+中小实例+综合案例的方式,讲述了 ...
- 不用 Notepad++,还有更牛逼的选择!
来源:oschina.net/news/110987/no-notepad-plus-plus 这两天 Notepad++ 牛逼了,然后引发了大家的关注,具体事件内容请大家自行百度,其实作为文本编辑工 ...
- 为什么我会认为SAP是世界上最好用最牛逼的ERP系统,没有之一?
为什么我认为SAP是世界上最好用最牛逼的ERP系统,没有之一?玩过QAD.Tiptop.用友等产品,深深觉得SAP是贵的有道理! 一套好的ERP系统,不仅能够最大程度承接适配企业的管理和业务流程,在技 ...
- 我喜欢ASP.NET的MVC因为它牛逼的9大理由(转载)
我很早就关注ASP.NET的mvc的,因为最开始是学了Java的MVC,由于工作的原因一直在做.Net开发,最近的几个新项目我采用了MVC做了,我个一直都非常喜欢.Net的MVC.我们为什么使用MVC ...
- 最牛逼android上的图表库MpChart(三) 条形图
最牛逼android上的图表库MpChart三 条形图 BarChart条形图介绍 BarChart条形图实例 BarChart效果 最牛逼android上的图表库MpChart(三) 条形图 最近工 ...
- 最牛逼android上的图表库MpChart(二) 折线图
最牛逼android上的图表库MpChart二 折线图 MpChart折线图介绍 MpChart折线图实例 MpChart效果 最牛逼android上的图表库MpChart(二) 折线图 最近工作中, ...
随机推荐
- Android Studio一些常用快捷键及快捷键冲突解决
1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对的地方,希望大家 ...
- Linux C编程学习之开发工具3---多文件项目管理、Makefile、一个通用的Makefile
GNU Make简介 大型项目的开发过程中,往往会划分出若干个功能模块,这样可以保证软件的易维护性. 作为项目的组成部分,各个模块不可避免的存在各种联系,如果其中某个模块发生改动,那么其他的模块需要相 ...
- byte[] 转十进制
short s = 0; //一个16位整形变量,初值为 0000 0000 0000 0000 byte b1 = 1; //一个byte的变量,作为转换后的高8位,假设初值为 0000 0001 ...
- AOJ 0558 Cheese【BFS】
在H * W的地图上有N个奶酪工厂,分别生产硬度为1-N的奶酪.有一只吃货老鼠准备从老鼠洞出发吃遍每一个工厂的奶酪.老鼠有一个体力值,初始时为1,每吃一个工厂的奶酪体力值增加1(每个工厂只能吃一次), ...
- 数量经济学推荐的Julia教程
http://quant-econ.net/jl/learning_julia.html Julia最为号称和c媲美的运行速度,想python一下简单的语法,虽然发展还不完善,但任然值得去关注. Ju ...
- Centos 6.5 X64 环境下编译 hadoop 2.6.0 --已验证
Centos 6.5 x64 hadoop 2.6.0 jdk 1.7 protobuf-2.5.0 maven-3.0.5 set environment export JAVA_HOME=/hom ...
- MIT 6.828 JOS学习笔记10. Lab 1 Part 3: The kernel
Lab 1 Part 3: The kernel 现在我们将开始具体讨论一下JOS内核了.就像boot loader一样,内核开始的时候也是一些汇编语句,用于设置一些东西,来保证C语言的程序能够正确的 ...
- Puppet自动化运维-C/S架构概念(1)
1.Puppet工作模式 (1)采用C/S架构(即是server<=>client) (2)Master 会对自己形成自签名CA中心,对Agent端进行证书颁发,验证通过才允许Agent( ...
- Mesos高可用解决方案剖析
本文作者王勇桥,80后的IT攻城狮,供职于IBM多年,Mesos和Swarm社区的贡献者.本文是他根据自己对Mesos的高可用(High-Availability)设计方案的了解以及在Mesos社区贡 ...
- 盘点销售一体机 打印POS一体的设备。 打印,盘点,销售PDA(手持终端)+移动销售POS软件
一.产品介绍 本产品为一个PDA(手持终端)+移动销售POS管理软件组合.可以实现功能如下: 可以实现移动销售(销售退货).盘点.配送.移库.打印小票的功能. 销售时,可以选择客户.业务员.库房,并且 ...