0
点赞
收藏
分享

微信扫一扫

CSS布局:水平居中

老牛走世界 2022-03-24 阅读 187

前言                              

  一直对CSS布局一知半解,这段时间打算定下心来好好学习一下,于是先从最简单的水平居中布局开始入手。下面以分页组件为实例来记录各种实现方式。

CSS布局:水平居中_自适应

common.css

CSS布局:水平居中_html_02CSS布局:水平居中_自适应_03

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

View Code


目标元素宽度固定时                            

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;} 

CSS布局:水平居中_css_04


  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 即可。

  CSS布局:水平居中_自适应_05

  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/

欢迎添加我的公众号一起深入探讨技术手艺人的那些事!

CSS布局:水平居中_自适应_06




举报

相关推荐

0 条评论