加载中…用css或js实现元素水平居中
(2015-09-14 14:09:25)
标签：
css和js使元素居中html5和css3居中显示的兼容解决前端遇到的问题 |
分类： 前端代码基础学习 |
使元素水平居中，是在页面排版中经常遇到的一件事，那你是否也为这样是的事烦恼过。用css或者js都可以使页面元素居中，但用css居中对于效率提升更有效。下面我来介绍几种常用的方式：
1.最常用的方式，使用margin：0
auto;（即margin-left:auto;margin-right:auto）.前提是需要知道元素的width。也就是说元素要是display：block。
2.使用display:inline-block;样式使元素转为内链元素，可以设置width属性（如果不设置即为内容大小宽度）。注意：需要给其父元素添加样式text-align:center。（意思就和文本居中雷同）。
3.使用绝对定位的方式居中（position），但需要获得子元素的width，
例子：
常规的如：
.one{position:relative;}
.two{ position:absolute; width:200px;
left:50%; margin-left:-100px}
css3元素可用如：
.one{position:relative;}
.two{ position:absolute; width:200px;
left:50%; -webkit-transform:translate(-50%)}
而这时可以不设置子元素的宽度，即子元素是内链元素也能使用这种方法。
但缺点是：可能要多考虑一下兼容性问题
4.fit-content属性
该元素具体功能是父元素适应子元素宽度，来显示居中；
例子：
.one{width:-webkit-fit-content;
margin:0 auto;}
.two{ width:200px;
float:left;}
主要考虑点是兼容性问题，不是很建议使用
5.使用js来使元素居中
直接放代码如下：
$(function(){
var
w=$(".btntext").width();
var
bodyw=$("body").width();
var mw=(bodyw-w)/2;
$(".btntext").css("padding-left",mw+"px");
})
//解释
获取子元素宽度，获取父元素宽度。
相减的差的一半即为子元素距离父元素左边距离
这里是一些主要的方式，其他的一些利用绝对定位和浮动的方式这边就不介绍了。http://www/uc/myshow/blog/misc/gif/E___6708EN00SIGG.gif
《Horizontally Centered Menus with no CSS
hacks》一文可以去了解一下
喜欢
0
赠金笔
前一篇：初入前端的那些事儿