CSS布局:水平居中
前言
一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开始入手。下面以分页组件为实例来记录各种实现方式。
common.css
<style type="text/css">
ul,li{list-style:none;margin:0;padding:0;}
body{
background:#888;
font-size:14px;
color:#F2F2F2;
text-shadow:1px 0 0 #101011;
}
.item{
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: #555;
background: -webkit-linear-gradient(top,#434345,#2f3032);
}
</style>
目标元素宽度固定时
1. display:block + margin: 0 auto
HTML Markup
<ul class="navbar">
<li class="item">Prev</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">Next</li>
</ul>
CSS
<style type="text/css">
.navbar{
margin: 0 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">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</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">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</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: 0 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">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</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: 0 auto
HTML Markup
<ul class="navbar">
<li class="item">Prev</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">Next</li>
</ul>
CSS
<style type="text/css">
.navbar{
margin: 0 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: 0 auto + width:fit-content
HTML Markup
<ul class="navbar">
<li class="item">Prev</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">Next</li>
</ul>
CSS
<style type="text/css">
.navbar{
margin: 0 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">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</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: 1;
}
注意:容器元素设置为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">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</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: 50%; /* 相对.container宽度定位 */
}
.navbar li{
position:relative;
float: left;
left: -50%; /* 相对.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">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">Next</li>
</ul>
</div>
CSS
<style type="text/css">
.container{
display:block; /* 保证.navbar定位是相对于所属容器的宽度 */
overflow: hidden; /* 防止.navbar定位+宽度大于容器宽度时,产生水平滚动条 */
}
.navbar{
position:absolute;
left: 50%; /* 相对.container宽度定位 */
}
.navbar li{
position:relative;
float: left;
left: -50%; /* 相对.navbar宽度定位 */
}
.navbar li + li {
margin-left: 10px;
}
</style>
兼容性:For all browser!
7. float:left + transform:translate(-50%,0)
HTML Markup
<div class="container">
<ul class="navbar">
<li class="item">Prev</li>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</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: 50%; /* 相对.container宽度定位 */
/* 相对.navbar宽度定位 */
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.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">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</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">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</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: 0 auto 即可。
HTML Markup
<img src="./john.png"/>
<input type="text"/>
CSS
<style type="text/css">
img,input{
display:block;
margin: 0 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="#">1</a></li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="item">Next</li>
</ul>
</button>
CSS
<style type="text/css">
.container{
/* button自带样式,且不会继承父节点的样式,因此需作样式重置 */
border: none 0;
background:#888;
font-size:14px;
color:#F2F2F2;
text-shadow:1px 0 0 #101011;
display: block;
margin: 0 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.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/
- Python爬虫(十五)_案例:使用bs4的爬虫
- Python爬虫(十六)_JSON模块与JsonPath
- 多类好米齐交易:域名776.cn近10万元结拍
- Python爬虫(八)_Requests的使用
- Python爬虫(十一)_案例:使用正则表达式的爬虫
- Python爬虫(十二)_XPath与lxml类库
- 区块链域名热度不减 健康类英文米近六位交易
- Python爬虫(九)_非结构化数据与结构化数据
- Python爬虫(十)_正则表达式
- python爬虫(四)_urllib2库的基本使用
- 投资人榴莲又卖出一枚三拼域名
- python爬虫(五)_urllib2:Get请求和Post请求
- python爬虫(七)_urllib2:urlerror和httperror
- 双拼市场好!米友售出域名chuijia.com
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 阔别两年,webpack 5 正式发布了!
- NumPy 数据归一化、可视化
- 迭代器怎么就节省内存了?
- Go 多版本管理
- 空谈分布式系统设计之幂等性
- 空谈发件箱模式(outbox pattern)
- 《一起学sentinel》六、Slot的子类及实现之FlowSlot和DegradeSlot
- Hive UDF/UDAF 总结
- 3分钟短文:用Laravel发一封“漂洋过海”的电子邮件
- leetcode之单词替换
- KMP算法分析
- Spring Boot 系列:最新版优雅停机详解
- 前端学数据结构与算法(八): 单词前缀匹配神器-Trie树的实现及其应用
- 突击并发编程JUC系列-Locksupport 与 Condition
- 01.视频播放器框架介绍