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

随机推荐

wex5&.net开发
一.环境开发 1.baas.net:菜单“窗口”->“首选项” 确定后左侧生成bass.net目录,设置iis网站目录(因为.net网站必须在iis中部署) 2.sqlserver:根据项目可选 ...
java 网络（socket）
本文梳理一个基础的java TCP消息通信,构造一个简单的Packet进行传输,代码如下: Packet public class Packet { private String attribute; ...
【C语言学习】《C Primer Plus》第5章运算符、表达式和语句
学习总结 1.有了一定的语言基础,运算符和表达式这些都大同小异,无外乎赋值运算符(=).算术运算符(+.-.*./.%.++.——)和其他的一下运算符(sizeof.(type)). 2.声明一个参数 ...
【T-SQL基础】03.子查询
以前总是追求新东西,发现基础才是最重要的,今年主要的目标是精通SQL查询和SQL性能优化. 本系列[T-SQL基础]主要是针对T-SQL基础的总结. [T-SQL基础]01.单表查询-几道sql查询题 ...
java实现输入一行字符，分别统计出其中英文字母、空格、数字和其它字符的个数。
package JingDian; import java.util.Scanner; public class charKind { public static void main(String[] ...
Android多线程分析之三：Handler，Looper的实现
Android多线程分析之三:Handler,Looper的实现罗朝辉 (http://www.cnblogs.com/kesalin/) CC 许可,转载请注明出处在前文<Android多 ...
[异常解决] android studio检测不到手机的解决办法——ADB驱动自己安装
用android studio搭建安卓开发环境比eclipse简单的多,仅仅下载一个1个G左右的安装包安装即可. 安装好之后随便建一个hello world工程,想用实体手机调试要点: 选择USB设备 ...
CGFloat Float 互转
直接上代码吧 var positionX:CGFloat = 10 var positionY:CGFloat = 20 var tmpX:Float = 30 var tmpY:Float = 40 ...
前端chrome浏览器调试总结
引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...
java-面向对象练习2
1．按要求编写Java应用程序: (1)编写西游记人物类(XiYouJiRenWu) 其中属性有:身高(height),名字(name),武器(weapon) 方法有:显示名字(printName), ...

CSS布局：水平居中

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

随机推荐

热门专题