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> & ...

随机推荐

深入理解openstack网络架构(2)----Basic Use Cases
原文地址: https://blogs.oracle.com/ronen/entry/diving_into_openstack_network_architecture1 译文转自: http:// ...
Linux3：more、which、find、chmod、tar、diff、grep、ps、netstat、uname
more 类似cat,不过more不是将整个文件内容从上到下显示在屏幕上的,而是以一页一页的显示方便使用者逐页阅读.more最基本的指令就是space即往下翻一页,b即往回翻一页显示,而且还有搜索字符 ...
.net开发笔记（十二）设计时与运行时的区别（续）
上一篇博客详细讲到了设计时(DesignTime)和运行时(RunTime)的概念与区别,不过没有给出实际的Demo,今天整理了一下,做了一个例子,贴出来分享一下,巩固前一篇博客讲到的内容. 简单回顾 ...
angularjs之browserTrigger
今天推荐一款来自angularjs源码的单元测试辅助库browserTrigger,这是来自于ngScenario的一段代码.主要用户触发浏览器型行为更新ng中scope view model的值. ...
[.net 面向对象程序设计进阶] (5) Lamda表达式(一) 创建委托
[.net 面向对象程序设计进阶] (5) Lamda表达式(一) 创建委托本节导读: 通过学习Lambda表达式,学会创建委托和表达式目录树,深入了解Lambda的特性,让你的代码变的更加清晰. ...
解决Win7 软件图标不显示--Win7图标异常，快捷方式不显示解决方法
电脑症状:WIN7的系统,桌面上的图标显示的不正常,快捷方式显示的是未知程序.看不到程序默认图标,快捷方式图标不显示. 解决方法:删除程序图标缓存即可. 将下面的内容复制到记事本保存为“Repai ...
leveldb源码学习系列
楼主从2014年7月份开始学习<>,由于书籍比较抽象,为了加深思考,同时开始了Google leveldb的源码学习,主要是想学习leveldb的设计思想和Google的C++编程规范.目 ...
跟我一起云计算（6）——openAPI
介绍 Open API即开放API,也称开放平台. 所谓的开放API(OpenAPI)是服务型网站常见的一种应用,网站的服务商将自己的网站服务封装成一系列API(Application Program ...
Node.js使用fs.renameSync报cross-device link not permitted错误
在Node.js中,我们可以使用formidable模块来轻松地实现文件上传功能,代码如下: var Q = require('q'); var util = require('util'); var ...
swift 项目 oc 和 swift 混用，文件相互引用
创建swift工程后,如果后面想新建 oc 文件,这时会生成一个 AppName-Bridging-Header.h文件一,在swift 文件中 1> 引用swift 文件什么都不需要操作 ...

CSS布局：水平居中

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

随机推荐

热门专题