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

随机推荐

mongoDB研究笔记：分片集群的工作机制
上面的(http://www.cnblogs.com/guoyuanwei/p/3565088.html)介绍了部署了一个默认的分片集群,对mongoDB的分片集群有了大概的认识,到目前为止我们还没有 ...
Android 自定义View 总结
Android系统本身给我们提供十分丰硕的组件让我们实现包罗万象的UI效果,与此同时,我们也能够非常方便实现各种方法来实现各种强大的功能.通过继承现有的UI控件,我们也能够拓展现有的功能.我们也能够完 ...
Linux计划任务crontab运行脚本不正确的问题
问题的由来写好的程序希望在崩溃之后能够自启动,于是利用linux的crontab功能,添加一个计划任务,每分钟执行一个脚本查看需要监控的进程是否还在,如果不在则启动之,否则不做任何事情.这么一个简单 ...
一个App完成入门篇（二）-搭建主框架
通过第一课的学习,你已经掌握了如何通过debug调试器来跟PC上的设计器联调来实时查看UI设计效果.调试代码了,接下来通过一系列的demo开发教学你将很快上手学习到如何开发一个真正的App. 要开发A ...
打通移动App开发的任督二脉、实现移动互联创业的中国梦
年初的两会上,第一次听到克强总理讲到“互联网+”的计划,当时就让我为之感到无比振奋.我个人的理解是:“互联网+”的本质就是要对传统行业供需双方的重构,通过移动互联技术来推动各个行业上的全民创新,促使中 ...
【转载】学习资料存档：jQuery的deferred对象详解
我在以前的文章里提到promise和deferred,这两个东西其实是对回调函数的一种写法,javascript的难点之一是回调函数,但是我们要写出优秀的javascript代码又不得不灵活运用回调函 ...
js作用域问题一步步透彻理解
黄金守则第一条: js没有块级作用域(你可以自己闭包或其他方法实现),只有函数级作用域,函数外面的变量函数里面可以找到,函数里面的变量外面找不到. first try: 这是为什么呢?? var a ...
.net 时间戳和日期互转
1.时间戳转日期 public static DateTime IntToDateTime(int timestamp) { ,,)).AddSeconds(timestamp); } 调用: ...
[ACM_动态规划] 嵌套矩形
问题描述:有n个矩阵,每个矩阵可以用两个整数a,b来表示 ,表示他的长和宽,矩阵X (a,b) 可以嵌套到Y (c,d) 里面当且仅当 a < c && b < d ...
Java-继承，多态练习0922-06
编写一个Shape类,具有属性:周长和面积: 定义其子类三角形和矩形,分别具有求周长的方法. 定义主类E,在其main方法中创建三角形和矩形类的对象, 并赋给Shape类的对象a.b,使用对象a.b来 ...

CSS布局：水平居中

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

随机推荐

热门专题