DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> css六種實現元素水平居中
css六種實現元素水平居中
編輯:CSS詳解     

居中效果在CSS中很是普通的效果,平時大家所看到的居中效果主要分為三大類:水平居中、垂直居中和水平垂直居中。而其中水平居中相對於後兩者來說要簡單得多。早期總結了一下互聯網上有關於水平垂直居中的幾種實現方案,比如說《CSS制作水平垂直居中對齊》中介紹了八中實現水平垂直的方案,而在《CSS制作圖片水平垂直居中》一文介紹了四種實現圖片垂直居中的方案,並且在《CSS3實現水平垂直居中》使用了CSS3的flexbox的屬性輕松實現多行文本水平垂直居中的方法。當然大家有可能認為這些方法對於浏覽嘎嘎的兼容性處理太煩了,也有人使用jQuery的方法實現水平垂直居中效果,比如在《jQuery制作元素在屏幕中水平垂直居中效果》中介紹的。

回到我們今天的話題,水平居中的實現方案,大家最熟悉的莫過開給元素定一個顯示式的寬度,然後加上margin的左右值為auto。如:

.center {
width: 960px;
margin-left: auto;
margin-right: auto;
}

這種方法給知道了寬度的元素設置居中是最方便不過的了,但有很多情況之下,我們是無法確定元素容器的寬度。換句話說,未有明確寬度的時候,上面的方法無法讓我們實現元素水平居中。那要怎麼辦呢?這也就是我們今天需要討論的問題。

為了更好的說明問題,我們來看一個制作分頁效果的代碼:

Html

<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</di

給分頁加上樣式:

.pagination li {
line-height: 25px;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradIEnt(top,#434345,#2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradIEnt(top,#f48b03,#c87100);
}

這是一個極普通的樣式代碼,初步的效果:

分頁導航效果

這很顯然不是我們需要的效果,接下來我們分幾種方案來制作:
一、margin和width實現水平居中

第一種方法是最古老的實現方案,也是大家最常見的方案,在分頁容器上定義一個寬度,然後配合margin的左右值為“auto”實現效果:

.pagination {
width: 293px;
margin-left: auto;
margin-right: auto;
}
.pagination li {
line-height: 25px;
display: inline;
float: left;
margin: 0 5px;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradIEnt(top,#434345,#2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradIEnt(top,#f48b03,#c87100);
}

代碼中綠色部分是為了實現分頁居中效果而添加的代碼。(下文中沒有特殊聲明,綠色部分代碼表示新增加的代碼。),先來看看效果:

分頁導航效果

效果是讓我們實現了,但其擴展性那就不一定強了。示例中只顯示了五頁和向前向後的七個顯項,但往往我們很多情況下是不知道會有多少個分頁項顯示出來,而且也無法確定每個分頁選項的寬度是多少,也就無法確認容器的寬度。

優點:實現方法簡單易懂,浏覽器兼容性強;

缺點:擴展性差,無法自適應未知項情況。
二、inline-block實現水平居中方法

這個方法早期在《如何解決inline-block元素的空白間距》和《CSS3制作的分頁導航》中都有涉及到,但未單獨提取出來。此次,將這種方法拿出來說。

僅inline-block屬性是無法讓元素水平居中,他的關鍵之處要在元素的父容器中設置text-align的屬性為“center”,這樣才能達到效果:

.pagination {
text-align: center;
font-size: 0;
letter-spacing: -4px;
Word-spacing: -4px;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
display: inline-block;
*display: inline;
zoom:1;
letter-spacing: normal;
Word-spacing: normal;
font-size: 12px;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradIEnt(top,#434345,#2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradIEnt(top,#f48b03,#c87100);
}

效果如下:

分頁導航效果

這個方法相對來說也是簡單易懂,但使用了inline-block解決了水平居中的問題,卻又產生了一個新的問題,就是分頁項與分頁項由回車符帶來的空白間距,那麼不知情的同學就會不知道如何解決?(而且這個間距並不是所有浏覽器都有),所以需要解決下inline-block帶來的間距,詳細的解決方法可以閱讀《如何解決inline-block元素的空白間距》一文。

做點:簡單易懂,擴展性強;

缺點:需要額外處理inline-block的浏覽器兼容性。
三、浮動實現水平居中的方法

剛看到標題,大家可能會感到很意外,元素都浮動了,他還能水平居中?大家都知道,浮動要麼靠左、要麼靠右,還真少見有居中的。其實略加處理就有了。

.pagination {
float: left;
width: 100%;
overflow: hidden;
position: relative;
}
.pagination ul {
clear: left;
float: left;
position: relative;
left: 50%;/*整個分頁向右邊移動寬度的50%*/
text-align: center;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
display: block;
float: left;
position: relative;
right: 50%;/*將每個分頁項向左邊移動寬度的50%*/
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradIEnt(top,#434345,#2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradIEnt(top,#f48b03,#c87100);
}

效果如下所示:

分頁導航效果

這種方法實現和前面的與眾不同,使用了浮動配合position定位實現。下面簡單的介紹了一下這種方法實現原理,詳細的可以閱讀Matthew James Taylor寫的《Horizontally Centered Menus with no CSS hacks》一文。

沒有浮動的div:大家都知道div是一個塊元素,其默認的寬度就是100%,如圖所示:

分頁導航效果

如果div設置了浮動之後,他的內容有多寬度就會撐開有多大的容器(除顯式設置元素寬度值之外),這也是我們實現讓分頁導航居中的關鍵所在:

分頁導航效果

接下來使用傳統的制作方法,我們會讓導航浮動到左邊,而且每個分頁項也進行浮動,就如下圖所示一樣:

分頁導航效果

現在要想的辦法是讓分頁導航居中的效果了,在這裡是通過“position:relative”屬性實現,首先在列表項“ul”上向右移動50%(left:50%;),看到如下圖所示:

分頁導航效果

如上圖所示一樣,整個分頁向右移動了50%的距離,緊接著我們在“li”上也定義“position:relative”屬性,但其移動的方向和列表“ul”移動的方向剛好是反方向,而其移動的值保持一致:

分頁導航效果

這樣一來就實現了float浮動居中的效果。

特別聲明:方法三思想來源於Matthew James Taylor寫的《Horizontally Centered Menus with no CSS hacks》一文,並且引用其文中演示的示意圖。

優點:兼容性強,擴展性強;

缺點:實現原理較復雜。
四、絕對定位實現水平居中

絕對定位實現水平居中,我想大家也非常的熟悉了,並且用得一定不少,早期是這樣使用的:

.ele {
position: absolute;
width: 寬度值;
left: 50%;
margin-left: -(寬度值/2);
}

但這種實現我們有一個難題,我並不知道元素的寬度是多少,這樣也就存在如方法一所說的難題,但我們可以借助方法三做一點變通:

.pagination {
position: relative;
}
.pagination ul {
position: absolute;
left: 50%;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
float: left;
position: relative;/*注意,這裡不能是absolute,大家懂的*/
right: 50%;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradIEnt(top,#434345,#2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradIEnt(top,#f48b03,#c87100);
}

效果如下所示:

分頁導航效果

優點:擴展性強,兼容性強;

缺點:理解性難。
五、CSS3的flex實現水平居中方法

CSS3的flex是一個很強大的功能,她能讓我們的布局變得更加靈活與方便,唯一的就是目前浏覽器的兼容性較差。那麼第五種方法,我們就使用flex來實現,其實這種方法早在《CSS3實現水平垂直居中》一文有介紹,我們把水平居中的部分代碼取出來:

.pagination {
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;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
float: left;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradIEnt(top,#434345,#2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradIEnt(top,#f48b03,#c87100);
}

效果如下:

分頁導航效果

優點:實現便捷,擴展性強

缺點:兼容性差。
六、CSS3的fit-content實現水平居中方法

今天看《Horizontal centering using CSS fit-content value》一文,讓我體驗了一下"fit-content"制作水平居中的方法。我也將這種方法收進來。

“fit-content”是CSS中給“width”屬性新加的一個屬性值,他配合margin可以讓我輕松的實現水平居中的效果:

.pagination ul {
width: -moz-fit-content;
width:-webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
float: left;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradIEnt(top,#434345,#2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradIEnt(top,#f48b03,#c87100);
}

效果如下:

分頁導航效果

優點:簡單易懂,擴展性強;

缺點:浏覽器兼容性差

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved