CSS布局：水平居中

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

一直对CSS布局一知半解，这段时间打算定下心来好好学习一下，于是先从最简单的水平居中布局开始入手。下面以分页组件为实例来记录各种实现方式。

common.css

<style type="text/css">

  ul,li{list-style:none;margin:;padding:;}

  body{

    background:#;

    font-size:14px;

    color:#F2F2F2;

    text-shadow:1px   #;

  }

  .item{

    padding:  10px;

    border-radius: 2px;

    box-shadow:  1px  #5a5b5c inset, 1px  #;

    background: #;

    background: -webkit-linear-gradient(top,#,#2f3032);

  }

</style>

目标元素宽度固定时　　　　　　　　　　　　　　　　　　　　　　　　　　　　

1. display:block + margin: auto

HTML Markup

<ul class="navbar">

  <li class="item">Prev</li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item">Next</li>

</ul>

CSS

<style type="text/css">

.navbar{

  margin:  auto;

  display: block;

  width: 300px;

}

.navbar li{

  float: left;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：All browser!
采用盒模型本身的margin来布局不会引起reflow。

2. display:block + <center></center>

HTML Markup

<center>

  <ul class="navbar">

    <li class="item">Prev</li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item">Next</li>

  </ul>

</center>

CSS

<style type="text/css">

.navbar{

  display: block;

  width: 300px;

}

.navbar li{

  float: left;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：All browser!
HTML5 不支持 <center> 标签，HTML 4.01 已废弃 <center> 标签

优点：当元素宽度固定，无需根据其内容/子元素变化时，原理和实现十分简单高效。
缺点：当元素宽度需根据其内容/子元素变化时（该元素及其子元素的font变化也会导致该元素的宽度变化）。

3. 若父元素和目标元素宽度均固定时，可采用盒模型自身的padding来布局

HTML Markup

<div class="container">

  <ul class="navbar">

    <li class="item">Prev</li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item">Next</li>

  </ul>

</div>

CSS

<style type="text/css">

.container{

  display: block;

  width: 600px;

}

.navbar{

  display: block;

  box-sizing: border-box;

  padding:  150px;

}

.navbar li{

  float: left;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

目标元素宽度自适应时　　　　　　　　　　　　　　　　　　　　　　　　

对于non-replaced element而言

1. display:table + <center></center>

HTML Markup

<center>

  <ul class="navbar">

    <li class="item">Prev</li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item">Next</li>

  </ul>

</center>

CSS

<style type="text/css">

.navbar{

  display: table;

}

.navbar li{

  float: left;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：All browser!
HTML5 不支持 <center> 标签，HTML 4.01 已废弃 <center> 标签

2. display:table + margin: auto

HTML Markup

<ul class="navbar">

  <li class="item">Prev</li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item">Next</li>

</ul>

CSS

<style type="text/css">

.navbar{

  margin:  auto;

  display: table;

}

.navbar li{

  float: left;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：IE8+
若子元素间无间隔时，可将 .navbar li{float:left;} 改为 .navbar li{display:table-cell;}

3. display:block + margin: auto + width:fit-content

HTML Markup

<ul class="navbar">

  <li class="item">Prev</li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item">Next</li>

</ul>

CSS

<style type="text/css">

.navbar{

  margin:  auto;

  display: block;

  width:intrinsic; /* For Safari, see https://developer.mozilla.org/en-US/docs/CSS/width */

  width:-moz-fit-content;

  width:-webkit-fit-content;

  width:fit-content;

}

.navbar li{

  float: left;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：No IE
fit-content是CSS3中width的新增属性值，表示容器元素宽度自适应子元素。

4. text-align:center + display:inline-block

HTML Markup

<div class="container">

  <ul class="navbar">

    <li class="item">Prev</li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item">Next</li>

  </ul>

</div>

CSS

<style type="text/css">

.container{

  text-align: center;

}

.navbar{

  display: inline-block;

}

.navbar li{

  float: left;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：IE8+
通过CSShack可兼容IE6/7

.navbar{

  *display: inline;

  zoom: ;

}

注意：容器元素设置为display:inline-block时，会被设置为float的子元素撑大。

5. float:left + position:relative

HTML Markup

<div class="container">

  <ul class="navbar">

    <li class="item">Prev</li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item">Next</li>

  </ul>

</div>

CSS

<style type="text/css">

.container{

  display:block;    /* 保证.navbar定位是相对于所属容器的宽度 */

  overflow: hidden; /* 防止.navbar定位+宽度大于容器宽度时，产生水平滚动条 */

}

.navbar{

  position:relative;

  float:left;

  left: %;  /* 相对.container宽度定位 */

}

.navbar li{

  position:relative;

  float: left;

  left: -%; /* 相对.navbar宽度定位 */

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：For all browser!

6. position:absolute + position:relative

HTML Markup

<div class="container">

  <ul class="navbar">

    <li class="item">Prev</li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item">Next</li>

  </ul>

</div>

CSS

<style type="text/css">

.container{

  display:block;    /* 保证.navbar定位是相对于所属容器的宽度 */

  overflow: hidden; /* 防止.navbar定位+宽度大于容器宽度时，产生水平滚动条 */

}

.navbar{

  position:absolute;

  left: %;  /* 相对.container宽度定位 */

}

.navbar li{

  position:relative;

  float: left;

  left: -%; /* 相对.navbar宽度定位 */

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：For all browser!

7. float:left + transform:translate(-%,)

HTML Markup

<div class="container">

  <ul class="navbar">

    <li class="item">Prev</li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item">Next</li>

  </ul>

</div>

CSS

<style type="text/css">

.container{

  display:block;    /* 保证.navbar定位是相对于所属容器的宽度 */

  overflow: hidden; /* 防止.navbar定位+宽度大于容器宽度时，产生水平滚动条 */

}

.navbar{

  float:left;

  position:relative;

  left: %;  /* 相对.container宽度定位 */

  /* 相对.navbar宽度定位 */

  -webkit-transform: translate(-%, );

  transform: translate(-%, );

}

.navbar li{

  float: left;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：IE9+

8. display:box

HTML Markup

<ul class="navbar">

  <li class="item">Prev</li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item"></li>

  <li class="item">Next</li>

</ul>

CSS

<style type="text/css">

.navbar{

  display: -webkit-box;

  -webkit-box-orient: horizontal;

  -webkit-box-pack: center;

  display: -moz-box;

  -moz-box-orient: horizontal;

  -moz-box-pack: center;

  display: -o-box;

  -o-box-orient: horizontal;

  -o-box-pack: center;

  display: -ms-box;

  -ms-box-orient: horizontal;

  -ms-box-pack: center;

  display: box;

  box-orient: horizontal;

  box-pack: center;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：IE10+

9. text-align:center + display:inline-box

HTML Markup

<div class="container">

  <ul class="navbar">

    <li class="item">Prev</li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item">Next</li>

  </ul>

</div>

CSS

<style type="text/css">

.container{

  text-align: center;

}

.navbar{

  display:-webkit-inline-box;

  display:-moz-inline-box;

  display:-ms-inline-flexbox;

  display:-webkit-inline-flex;

  display:inline-flex;

}

.navbar li{

  float: left;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

兼容性：IE10+

对于replaced element而言

直接采用 display:block + margin: auto 即可。

HTML Markup

<img src="./john.png"/>

<input type="text"/>

CSS

<style type="text/css">

img,input{

  display:block;

  margin:  auto;

}

</style>

奇技淫招

既然replaced element实现宽度自适应居中如此简单，那我们可否以replaced element为容器包裹目标元素呢？这时我们将目光投到button标签了:)

HTML Markup

<button class="container" onmousedown="return false;">

  <ul class="navbar">

    <li class="item">Prev</li>

    <li class="item"><a href="#"></a></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item"></li>

    <li class="item">Next</li>

  </ul>

</button>

CSS

<style type="text/css">

.container{

  /* button自带样式，且不会继承父节点的样式，因此需作样式重置 */

  border: none ;

  background:#;

  font-size:14px;

  color:#F2F2F2;

  text-shadow:1px   #;

  display: block;

  margin:  auto;

}

/* 消除获取焦点后出现的外边框 */

.container:focus{

  outline: none;

}

.navbar li{

  float: left;

}

.navbar li + li {

  margin-left: 10px;

}

</style>

虽然采用button作为壳实现水平居中代码简单，但会引发其他问题：

1. button不会继承父节点的样式，需作样式重置——导致CSS片段重复；

2. 在IE下button内的a元素样式全丢，且点击时不会打开新网页，需要通过click事件处理button内元素的点击操作；

3. 在IE下需要通过onmousedown="return false"来清除点击时button整体元素的样式变化。

总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/5237172.html^_^肥子John

感谢　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
http://www.456bereastreet.com/archive/201303/how_to_shrinkwrap_and_center_elements_horizontally/
http://www.w3cplus.com/css/elements-horizontally-center-with-css.html
http://zxc0328.github.io/2015/05/21/centering-all-the-directions/

http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/

CSS布局：水平居中的更多相关文章

主流 CSS 布局(水平居中、垂直居中、居中 )
什么是布局 html 页面的整体结构或骨架布局不是某个技术内容而是一种设计思想 [ 布局方式 ] 水平居中布局垂直居中布局居中布局( 水平 + 垂直 ) 什么是水平居中布局水平居中布局元素 ...
css布局--水平居中
一.水平居中 1. 使用text-align和display:inline-block实现水平居中 html <div class="parent"> <div ...
CSS布局：元素水平居中
CSS布局之元素水平居中本文将依次介绍在不同条件下实现水平居中多种方法一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对i ...
界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
Html和CSS布局技巧
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的 ...
CSS布局（下）
1.CSS布局之浮动 1.1.float之图文混排 float的意思就是元素漂浮在上层. 可以直接通过设置float属性实现图文混排,代码如下: <div style="width:2 ...
CSS布局（上）
CSS布局(上) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !import ...
Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...

随机推荐

hadoop使用问题
前提环境 ubuntu 安装hadoop 已经有一段时间 1．启动的时候提示 Connection reset by peer 这个查看日志,里面有说 ssh里面某个文件的权限太大这个ssh里修改 ...
JavaScript使用DeviceOne开发实战（四）仿优酷视频应用
开发之前需要考虑系统的差异性,比如ios手机没有回退键,所以在开发时一定要考虑二级界面需要有回退键,否则ios的手机就会陷入到这个页面出不去了.安卓系统有回退键,针对这个情况需要要求用户在3秒钟之内连 ...
站在移动互联时代的十字路口上_deviceone
最近总能看到类似“App已死,服务永生”.“App必死,web永生” .“App已死,微信建站已生”这样的文章.不晓得这些网络写手到底是想代表某些公司的立场.还是想要表达怎么样的一个情结,文章中语气都 ...
IE浏览器不能自动显示PDF文件的解决办法
今天更新了Adobe的PDF Reader,更新后发现在网页上无法预览PDF文件了,点击PDF的连接,浏览器就会提示下载或者打开,感觉很不爽,经过一番百度,找到了解决办法,在这里分享一下. 打开IE浏 ...
[ZigBee] 7、ZigBee之UART剖析（ONLY串口发送）
综述:USART0和USART1是串行通信接口,它们能够分别运行于异步UART模式或者同步SPI 模式.两个USART具有同样的功能,可以设置在单独的I/O 引脚. 1.UART 模式 UART 模式 ...
Linux下Java开发环境搭建—CentOS下Eclipse的安装教程
据了解,在Linux下的Java开发很多时候都比较喜欢使用vim + 插件,反而很少使用Eclipse,但是我是第一次使用Linux来进行Java编程,就什么都体验下啦,好啦,废话不多说,直接开始啦. ...
Zabbix安装部署
zabbix服务器端配置:(10.27.98.29服务器端) 1.安装lamp环境 yum -y install autoconf curl-devel gcc gcc-c++ httpd httpd ...
Gitlab备份、升级、恢复
一.备份 1.使用Omnibus安装包安装 --gitlab-rake gitlab:backup:create 2.使用源码安装 --./use_gitlab----如果备份失败,PATH路径错误, ...
ui-router API
ui-router API 英文不咋地感觉找个API都要找半天, 拿好不谢 http://angular-ui.github.io/ui-router/site/#/api/ui.router
leancloud 手机注册用户（调用API）教程
// 从storybord 连线过来的button方法(注册按钮) - (IBAction)regist:(UIButton *)sender { AFHTTPSessionManager *mana ...

CSS布局：水平居中

CSS布局：水平居中的更多相关文章

随机推荐

热门专题