温故而知新 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(二) 折线图 最近工作中, ...
随机推荐
- iOS 对象和json互相转换
// 将字典或者数组转化为JSON串 - (NSData *)toJSONData:(id)theData { NSError *error = nil; NSData *jsonData = [NS ...
- apk反编译工具
反编译工具: apktool:资源文件获取,可以提取出图片文件和布局文件进行使用查看 dex2jar:将apk反编译成Java源码(classes.dex转化成jar文件) jd-gui:查看APK中 ...
- webstorm基础使用总结
webstorm基础使用总结(不仅仅是一堆快捷方式) 注:原文链接: 水车 : 本次写的内容是我想到那个就写那个,都是本人平时写代码的时候的一些习惯,未必是最好的,贵在交流! 1: shift+e ...
- <c:if test="value ne, eq, lt, gt,...."> 用法
类别 运算符 算术运算符 + . - . * . / (或 div )和 % (或 mod ) 关系运算符 == (或 eq ). != (或 ne ). < (或 lt ). > (或 ...
- 数据库SQL语句优化小结
网上查找的总结: 1.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而进行全表扫描,如: select id from t where num is null ...
- MVC 解决 readonly 问题
<input type="text" class="form-control" name="UR_UserName" value=&q ...
- PHP中的header()函数作用
PHP 中 header()函数的作用是给客户端发送头信息. 什么是头信息?这里只作简单解释,详细的自己看http协议.在 HTTP协议中,服务器端的回答(response)内容包括两部分:头信息(h ...
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- 将一个实体数据保存到不同的数据表中<EntityFramework6.0>
2014-11-22声明方式 public class Product { [Key] [DatabaseGenerated(DatabaseGeneratedOption.None)] public ...
- [译]:Xamarin.Android开发入门——Hello,Android Multiscreen深入理解
原文链接:Hello, Android Multiscreen_DeepDive. 译文链接:Xamarin.Android开发入门--Hello,Android Multiscreen深入理解. 本 ...