利用vertical-align:middle实现在整个页面居中

来源：互联网发布：windows 共享无权限编辑：程序博客网时间：2024/05/16 06:29

如果想让一个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;}

0 0