在页面布局中，经常用到浮动，那浮动以后的元素还可以居中吗？这篇文章主要讲了如何让一个float:left的元素居中，不知道的小伙伴继续往下看吧。听起来很高端大气上档次的样子 但是其实试了一下还是很简单
第一种方法
.box { float: left; width: 100px; height: 100px; background: lightcoral; }
现在它所处的位置 在页面的最左边
我们都知道在浮动的情况下添加margin: 0 auto; 是没有任何效果的。
那么我们在box的外面再套一个div 就是给他一个爸爸 让他的爸爸处于页面的正中央
.con { position: relative; float: left; left: 50%; background: lightblue; } .box { position: relative; float: left; left: -50%; width: 100px; height: 100px; background: lightcoral; }
运行代码 我们得到下面的结果
蓝色的con为砖红色box的“爸爸”，从图上我们可以很清楚的看到， con通过定位往左移了百分之五十。而box通过相对定位，定位在con的-50%的地方，即为正中心。
给子元素相对定位，是想将相对于父元素来定位自己的位置，float:left让子元素在同一水平线上显示，left:-50%是因为子元素的整体宽度就是父元素的宽度，left:50%就是让子元素内容往相对父元素左上那一点往左移动父元素一半的宽度（right:50%是距右边50%，效果一样），正好实现子元素内容居中显示的效果。
这是引用了别人的话，会更加清晰。
第二种方法
是使用原生JavaScript写的
var con = document.getElementById('con'); con.style.position = 'relative'; con.style.left = (document.body.offsetWidth - con.clientWidth) / 2 + 'px';
通过获取屏幕的总宽度 减去box本身的宽度 除以二 便得到了中心的位置。
第三种方法
JQ
$('.box').css({ 'position' : 'relative', 'left' : ($(window).width() - $('.box').outerWidth()) / 2 + 'px' })
和JS的原则是一样的~
现在只有领悟了三种方法~希望以后能有更多的方法！
以上就是你知道怎么让一个float:left的元素居中吗？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1612030.html
微信扫一扫 
支付宝扫一扫 
