温故而知新 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(二) 折线图 最近工作中, ...
随机推荐
- swift 的枚举、结构体、类
一.Swift的枚举 枚举是一系相关联的值定义的一个公共的组类型,同时能够让你在编程的时候在类型安全的情况下去使用这些值.Swift中的枚举比OC中的枚举强大得多, 因为Swift中的枚举是一等类型, ...
- postgresql数据库备份和恢复
PostgreSQL自带一个客户端pgAdmin,里面有个备份,恢复选项,也能对数据库进行备份 恢复(还原),但最近发现数据库慢慢庞大的时候,经常出错,备份的文件过程中出错的几率那是相当大,手动调节灰 ...
- 攻城狮在路上(陆)-- 提交运行MapReduce程序到hadoop集群运行
此种方式不能直接在eclipse中调试代码. 首先需要在src下放置服务器上的hadoop配置文件:core-site.xml\yarn-site.xml\hdfs-site.xml\mapred-s ...
- phpcms 整合 discuz!
第一步,进入discuz后台,点击UCenter菜单,然后点击应用管理,接着点击右侧的添加新应用按钮 然后填写应用相关信息: 1.应用类型选择“其他” 2.应该名称填写“phpcms” //此处可以自 ...
- 体验Visual Studio 2015 之 MVC - 视图组建
VS2015 PERVIEW中可以创建MVC 项目. 我们可以 发现有几大亮点. 首先我们看目录结构: 当前项目包含两个主要的文件夹:Solution Items .src 很明显src文件夹下为当前 ...
- openmp 的使用
http://blog.csdn.net/gengshenghong/article/details/7003110 说明:这部分内容比较基础,主要是分析几个容易混淆的OpenMP函数,加以理解. ( ...
- font-family字体总结
宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 ...
- Tomcat的粗略介绍
因为工作的缘故很多项目启动需要通过Tomcat修改配置文件进行启动项目,所以相应的就了解了下Tomcat便于在以后比我更新的新人面前装逼. 1.bin目录 我们能用到的无非一个启动跟一个关闭没什么好说 ...
- PHP isset() empty() isnull() 的区别
<? isset - 检测变量是否设置 注意: isset 检测变量是否设置,并且不是 NULL. 若使用 isset() 测试一个被设置成 NULL 的变量,将返回 FALSE: empty ...
- wpf,能够复制文字 及自动识别URL超链接的TextBlock
using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using S ...