1.行內元素:這個比較簡單,一般使用text-align:center就可。
lang="en">
charset="utf-8" />
documenttitle>
type="text/css">
#div1
style>
id="div1">
行內居中
div>
body>
html>
2.塊級元素。
lang="en">
charset="utf-8" />
documenttitle>
type="text/css">
#div1
style>
id="div1">
塊居中11111111
div>
body>
html>
lang="en">
charset="utf-8" />
documenttitle>
type="text/css">
table
#div1
style>
id="div1">
塊居中1111
div>
td>
tr>
table>
body>
html>
(2)和第一種類似,將元素設定為display:table ,然後用margin。。。。
不過要注意的是它不相容ie8以下的版本
#div1
(3)用display:inline ,然後在外面框乙個元素,設定text-align:center
lang="en">
charset="utf-8" />
documenttitle>
type="text/css">
#div0
#div1
style>
id="div0">
id="div1">
塊居中111
div>
div>
body>
html>
(4)用position去定位。可以在父元素設定 position:relative;float:left;left:50%,然後給子元素設定position:relative;left:-50%。這個很好理解,如果父元素left:50%,那麼父元素的開始會距離左邊50%的距離(相對原來),然後把子元素向左移動父元素一半距離(這裡也就相當於移動自身50%的距離),那麼相對原來就是居中了!
~(≧▽≦)/~
嘛,這裡要注意的是要設定浮動。如果不設定浮動,那麼它的寬度就是原來預設的寬度(一般就是螢幕的內容長度–不定);而設定浮動之後,如果不設定寬度,那麼它會盡可能的窄(也就是適應內容的寬度了),就會在後來達到類似定寬的效果。
lang="en">
charset="utf-8" />
documenttitle>
type="text/css">
#div0
#div1
style>
id="div0">
id="div1">
塊居中11111111111111111111111111111
div>
div>
body>
html>
6.26補充,用css3的transform的translate屬性也可以實現水平垂直居中,它需要與position合用。
例如:
html元素水平居中
一 行內元素水平居中 如下 行內元素在父容器中水平居中顯示。效果 二 塊狀元素水平居中 當被設定元素為塊狀元素時,text align center 就不起作用了,此時分兩種情況 定寬塊狀元素和不定寬塊狀元素。1 定寬塊狀元素 塊狀元素的寬度width為固定值 方法 滿足定寬和塊狀兩個條件的元素可以...
元素水平垂直居中
lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行,支援ie8 block1 block1 before center1 不...
css元素水平居中
問題 想讓元素x 不是文字 水平居中 方法一 text align center text align屬性指定元素文字的水平對齊方式。要求 text align center,作用在x元素的父元素上,並且x不能是塊級元素 因為塊級元素會填充滿整個父元素 準確一點來說,就是x的寬要小於父元素的。要是想...