純CSS+DIV輕松解決對象在任何位置上水平對齊的問題

作者：創(chuàng)新互聯(lián) 文章來源：前端開發(fā)部點擊數(shù)：更新時間：2010-12-17
其實今天咱們要討論的話題并非是什么先進技術(shù)，而是針對前端開發(fā)者經(jīng)常碰見的“老朋友”而提出個人的一些設(shè)計心得：對象水平對齊。
　　眾所周知，如果想將文本和圖片實現(xiàn)水平居中效果，直接用CSS樣式 text-align: center 即可實現(xiàn)，但如果要對任一對象（基本可視為DIV對象）采取同一方法，是完全不見效的。之前在“圖層對象絕對居中”一文中也提到，用純CSS來實現(xiàn)的原理就是利用left：50%，top：50%，margin-top：-height()/2，margin-left：-width()/2。類似地，將要實現(xiàn)水平居中的對象（文本、圖片、flash，甚至DIV均可）加入兩個“外殼”DIV。其中最外層的CSS設(shè)置為 FLOAT: left; right: 50%; position: relative; 而里層的則設(shè)置為 float: left; overflow: visible; left: 50%; position: relative; 就這么簡單就可以輕松實現(xiàn)了對象的水平居中效果。
　　當然，上面所說的只是最基本、最簡化的實例，但在實際應(yīng)用中往往會摻和相對復(fù)雜的排版布局。其中最常見的當然是九格宮應(yīng)用。打個比方，如果頁面的水平布局是三欄組成的，其中左右兩欄是規(guī)定寬度的，中間欄會自動根據(jù)屏幕寬度來自適應(yīng)。那么這時候該如何設(shè)計才能既使中間欄自適應(yīng)寬度，同時又能使中間欄的內(nèi)容實現(xiàn)水平居中呢？
這里就得穿插另一個排版布局的技巧了：左右兩欄固定寬度，中間欄自適應(yīng)屏幕寬度而變化。舉個實例吧
<style type="text/css">

</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="mid"></div>
　　從上例中可見，中間欄的margin-left和margin-right的數(shù)值剛才就是左右兩欄各自的寬度，其中三者的先后順序是關(guān)鍵部分（中間欄的源碼放置最后）。
　　所以如果遇到在固定寬度的區(qū)域內(nèi)實現(xiàn)水平居中效果，可以先在外層再套一個DIV來設(shè)定寬度，這樣一來，不管對象放在哪里都能方便地實現(xiàn)水平居中了。
CSS實現(xiàn)垂直居中的方法 :上一篇
DIV+CSS布局排版對于網(wǎng)站那些好處 :下一篇

国产又黄又粗又长又大的视频-色婷婷久久一区二区爽爽爽-欧美日本韩国国产在线观-尹人香蕉琪琪在现观看

前端開發(fā)

域名注冊

虛擬主機

網(wǎng)站建設(shè)

服務(wù)器租用

營銷推廣

網(wǎng)站程序

移動互聯(lián)網(wǎng)

企業(yè)郵箱

網(wǎng)站備案

純CSS+DIV輕松解決對象在任何位置上水平對齊的問題

純CSS+DIV輕松解決對象在任何位置上水平對齊的問題

div+css相關(guān)文章