利用vertical-align:middle實現在整個頁面居中
如果想讓一個div或一張圖片相對於整個頁面居中,用vertical-align:middle可以很簡單地解決。
就以一個404頁面為例,看如何讓一張圖片相對於整個頁面居中,如下圖:
這是一個404頁面,裡面就只有一張圖片,點選圖片可以回到首頁,而且這個圖片是相對於整個頁面居中的,無論是水平還是垂直(PS:這可算是我做404頁面最為習慣的一種懶人做法了,越簡單越好,要想好看的話,直接用photoshop做一張好看一點的圖片就好了~)。
接下來看一下它的html程式碼:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>404頁面</title> 6 </head> 7 <body> 8 <div class="wall"> 9 <a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁面" /></a> 10 </div> 11</body> 12 </html>
程式碼很簡單,就一個class="wall"的div標籤,一個a標籤,一個class=“img404”的img標籤。
接下來就是寫css了,先讓class="wall"的div的寬和高都為100%,以填充整個頁面,CSS如下:
1 <style type="text/css">2 body{ margin:0; background:#333; _height:100%;}3 .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;}4 .img404{ border:0;width:700px;}5 </style>
以上CSS裡面值得一說的恐怕就是為什麼要用絕對定位(position:absolute)以及_height:100%這個樣式了;我試了很多方法,結果我只能用絕對定位才能讓它的height:100%生效,當然固定定位(position:fixed)也是可以的,可是IE6不支援;_height:100%是為了相容IE6,讓class="wall"的div在IE6裡也能高度為100%。如果想驗證一下class="wall"的div現在是否已經填充了整個頁面,不妨在.wall裡面設一個背景色就可以知道了,這裡我就不做實驗了。
目前整頁的程式碼如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>404頁面</title> 6 <style type="text/css"> 7 body{ margin:0; background:#333; _height:100%;} 8 .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;} 9 .img404{ border:0; width:700px;}10 </style> 11 </head> 12 <body> 13 <div class="wall"> 14 <a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁面" /></a> 15 </div> 16 </body> 17 </html>
效果如下:
接下來就利用vertical-align:middle來實現垂直居中了,因為class="wall"的div填充了整個頁面,所以只要讓圖片在class="wall"的div裡面垂直居中就達到目的了。以前總是以為vertical-align與text-align是同樣的道理,一個是垂直居中,一個是水平居中,只要給class="wall"的div加上一個vertical-align:middle就能讓圖片垂直居中,結果一點效果也沒有。事實上vertical-align與text-align完全不一樣,給class="wall"的div加上一個text-align:center的話,毫無疑問是可以讓裡面的img水平居中,但vertical-align卻不能這樣子用。
先看一下W3C上對vertical-align的定義:vertical-align 屬性設定元素的垂直對齊方式。該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中,這個屬性會設定單元格框中的單元格內容的對齊方式。
必須承認這句話我看了很久才看懂說的是神馬意思,我的理解是它有兩種用法:
第一種用法,先看後面一句“在表單元格中,這個屬性會設定單元格框中的單元格內容的對齊方式。”這很容易理解,如果給一個表格的td加一個vertical-align:middle的樣式,表格裡面的內容會垂直居中,同樣的如果給一個vertical-align:bottom就會底部對齊,如果給一個vertical-align:top就會頂部對齊。
第二種用法,看前頁一句“該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。”專業的語言我不會說的,可以打個比喻:假設有兩個行內元素a和b,a和b都是img,當a加了一個vertical-align:middle樣式之後,b的底部(基線)就會對齊a的中間位置,如下圖:
如果a和b都加了一個vertical-align:middle樣式,那麼就互相對齊了對方的中間位置,也就是它們在垂直方向上的中線對齊了,如下圖:
說到這裡,思路就清晰了(PS:理應知道vertical-align可以設middle,top,bottom等等,甚至可以設定具體的值或百分比,如果想知道會有怎樣的效果,可以自己實驗一下,這裡就不多說了。)。
接下來回到這篇文章的主題,現在我要讓class="img404"的img在class="wall"的div裡面垂直居中,我可以在div裡面加一個span空標籤,把它的高度設為100%,再給它一個vertical-align:middle樣式,同樣地給img一個vertical-align:middle樣式,那麼img就可以在div裡面垂直居中了。如圖:
按照這個思路,完整的頁面程式碼就出來了:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>404頁面</title> 6 <style type="text/css"> 7 body{ margin:0; background:#333; _height:100%;} 8 .wall{ width:100%; height:100%; position:absolute; left:0; top:0; text-align:center; font-size:0;} 9 .img404{ border:0; width:700px; vertical-align:middle;}10 .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;}11 </style> 12 </head> 13 <body> 14 <div class="wall"> 15 <span class="verticalAlign"></span> 16 <a href="index.html"><img class="img404" src="images/404.jpg" alt="404頁面" /></a> 17 </div> 18 </body> 19 </html>
以上的CSS裡面值得一提的是.verticalAlign,加一個display:inline-block是為了觸發它的layout,以讓本來沒有layout的span可以設定寬和高,margin-left:-1px是為了讓span左移一個畫素,而令img在水平方向上回到正中位置;另外.wall裡面的font-size:0正如我上一篇文章所說的是為了消除程式碼換行所造成的空隙。
最終效果如下:
(PS:以上僅是個人理解,如有不同意見,或以上說法有錯漏,歡迎指出。)
同樣的原理可以實現文字居中,完整程式碼如下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title>無標題頁</title> 6 <style type="text/css"> 7 .wrap{ width:1000px; height:100px; border:solid 1px #999; margin:0 auto; text-align:center;} 8 .verticalAlign{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px;} 9 .textSpan{vertical-align:middle;}10 </style> 11 </head> 12 <body> 13 <div class="wrap"> 14 <span class="verticalAlign"></span> 15 <span class="textSpan">文字居中</span> 16 </div> 17 </body> 18 </html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageForm.aspx.cs" Inherits="Buloo.PPMS.UI.Main.View.JDGL.ImageForm" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../../Scripts/DeleteGridData.js" type="text/javascript"></script> <link href="../../Styles/AddRecord.css" rel="stylesheet" type="text/css" /> </head> <body style="background-color: #dfe8f6;"> <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="CompanyX" /> <form id="form1" runat="server"> <ext:Panel ID="RoomImagePanel" runat="server" Layout="HBoxLayout" Width="700px" Header="false" BodyStyle="background-color:#dfe8f6;"> <LayoutConfig> <ext:HBoxLayoutConfig Padding="5" Align="Top" DefaultMargins="0 4 0 0" /> </LayoutConfig> <Items> <ext:Button ID="RoomLatest" runat="server" Text="下載最新" Icon="New" Width="70px"> </ext:Button> <ext:FileUploadField ID="RoomUpload" runat="server" ButtonText="上傳" Icon="DiskUpload" ButtonOnly="true"> </ext:FileUploadField> <ext:Button ID="RoomSave" runat="server" Text="另存為" Icon="DiskDownload" Width="60px"> <Listeners> <Click Handler="CompanyX.saveimagefile('ShowRoomImage','downloadfile')" /> </Listeners> </ext:Button> <ext:Button ID="RoomDelete" runat="server" Text="刪除" Icon="Delete" Width="60px"> </ext:Button> <ext:Button ID="RoomPrev" runat="server" Text="上" Icon="ArrowLeft" Width="60px"> <Listeners> <Click Handler="CompanyX.prev('CurRoomImageIdx', 'HiddenRoomImages', 'RoomPrev', 'RoomNext', 'ShowRoomImage')" /> </Listeners> </ext:Button> <ext:Button ID="RoomNext" runat="server" Text="下" Icon="ArrowRight" Width="60px"> <Listeners> <Click Handler="CompanyX.next('CurRoomImageIdx', 'HiddenRoomImages', 'RoomPrev', 'RoomNext', 'ShowRoomImage')" /> </Listeners> </ext:Button> </Items> </ext:Panel> <div style="width: 700px; text-align: center; margin-top: 4px; height: 500px;"> <span style="vertical-align: middle; display: inline-block; height: 100%; width: 1px; margin-left: -1px;"></span> <ext:Image ID="ShowRoomImage" runat="server" Cls="test"> </ext:Image> </div> <ext:Hidden ID="CurRoomImageIdx" runat="server"> </ext:Hidden> <ext:Hidden ID="HiddenRoomImages" runat="server"> </ext:Hidden> <iframe style="display: none" id="_SAVEASIMAGE_TEMP_FRAME" name="_SAVEASIMAGE_TEMP_FRAME" onload="CompanyX._doSaveAsImage();" src="about:blank"></iframe> </form> </body> </html>
.test { vertical-align:middle; }