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

随机推荐

微软四十周年 Microsoft’s 40th anniversary
比尔-盖茨在4月3日给微软全体员工写了这封邮件,原文是英文,我们翻译了中文.图片是后加上的. 明天将是特殊的一天:微软的40周年纪念日. Tomorrow is a special day: Micr ...
Perl重命名当前目录下的文件
下载的zip包解压后,中文都变成了乱码,就写了个脚本重命名文件. use strict; use warnings; use Cwd; sub main { my $dir = getcwd(); o ...
HttpContext.Current：异步模式下的疑似陷阱之源
最近园子里首页有好几篇文章都是讲异步编程的,尤其是几篇讲博客园自身的异步化建设的文章,看了以后很有收获. 闲暇之余再重新查查资料温故知新学习一遍,重新认识了SynchronizationContext ...
Jsp+ Servlet+Ajax实现点赞功能
1.jsp页面,使用ajax实现局部刷新 2.servlet接受处理去更新数据库随后上传
[Linux]Linux下redis的安装及配置.
在上一篇[Linux] linux下安装配置 zookeeper/redis/solr/tomcat/IK分词器详细实例. 我们已经将redis所需tar包拷贝到了linux下的root 根目录下, ...
Atitit 图像处理知识点知识体系知识图谱v2
Atitit 图像处理知识点知识体系知识图谱v2 霍夫变换(Hough Transform) 霍夫变换是图像处理中从图像中识别几何形状的基本方法之一,应用很广泛,也有很多改进算法.主要用来从图像 ...
Atiit 如何手写词法解析器
Atiit 如何手写词法解析器 1.1. 通过编程直接从正则->nfa->dfa->表驱动词法解析一条龙自动生成.那是用程序自动生成是需要这样的,自己手写完全不必要这么复杂1 1.2 ...
CCNA学习 NAT网络地址转换
CCNA基础 NAT网络地址转换在计算机网络中,网络地址转换(Network Address Translation,缩写为NAT),也叫做网络掩蔽或者IP掩蔽(IP masquerading),是 ...
如何在 ETL 项目中统一管理上百个 SSIS 包的日志和包配置框架
一直准备写这么一篇有关 SSIS 日志系统的文章,但是发现很难一次写的很完整.因为这篇文章的内容可扩展的性太强,每多扩展一部分就意味着需要更多代码,示例和理论支撑.因此,我选择我觉得比较通用的 LOG ...
javascript类型系统——undefined和null
× 目录 [1]原因 [2]undefined [3]null 前面的话一般的程序语言,表示空的只有null,但javascript的设计者Brendan Eich却设计了一个undefined,这 ...

CSS布局：水平居中

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

随机推荐

热门专题