元素的水平居中總結

2021-07-11 14:38:37 字數 1924 閱讀 1324

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的寬要小於父元素的。要是想...