码迷,mamicode.com
首页 > Web开发 > 详细

温故而知新 css + html 超级牛逼的居中策略

时间:2016-12-20 10:07:32      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:信息化   内容   div   blog   slider   原理   anti   全屏   alt   

该方法甚至可以解决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 超级牛逼的居中策略

标签:信息化   内容   div   blog   slider   原理   anti   全屏   alt   

原文地址:http://www.cnblogs.com/CyLee/p/6201360.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!