關於居中問題

2022-07-26 06:03:11 字數 1365 閱讀 8166

近期做移動端專案,某乙個頁面內每個模組都有按鈕,按鈕大小一樣,離底部距離一樣,於是寫了公共樣式,在這裡遇到個問題——居中,因為有時候是2個按鈕,有時候是乙個,整體寬度不一致,於是用了最基本的方法,給最外層position:fixed;bottom:20px;left:50%;margin-left:-容器寬度的一半。這樣問題是解決了,但是不怎麼靈活,寬度改變了我的margin-left值就要變,很繁瑣。

後來經嘗試+朋友指點,終於得以解決,具體如下:

html**:

1

<

div

class

="ui_btn"

>

2<

div>跳過

div>

3<

div>配置wifi

div>

4div

>

css**:

.ui_btn /* fixed也可以用absolute代替,根據頁面需求調整*/.ui_btn div

這個方式針對固定在底部的按鈕比較適用,如果是文件中的按鈕,取消position,bottom,left即可。只是其中的道理還不明白,望各路大神指點。

div垂直居中,知道高度的情況下:

<

style

>

.wrap

.wrap div

style

>

<

body

>

<

div

class

="wrap"

>

<

div>

div>

div>

body

>

div垂直居中,不設定高度:

<

style

>

.mark

.content

pstyle

>

<

body

>

<

div

class

="outer"

>

<

div

class

="mark"

>

div>

<

div

class

="content"

>

<

p>測試居中

p>

div>

div>

body

>

transform: translate(-50%,-50%);是關鍵

關於垂直居中的問題

在說到這個問題的時候,也許有人會問css中不是有vertical align屬性來設定垂直居中的嗎?即使是某些瀏覽器不支援我只需做少許的css hack技術就可以啊!所以在這裡我還要囉嗦兩句,css中的確是有vertical align屬性,但是它只對 x html元素中擁有valign特性的元素才...

面試問題 關於水平居中和垂直居中

這個問題很常見,記錄下來將來好在面試之前複習複習!1 margin 0 auto 0是隨意的乙個值,第二個值必須設為auto,此方法只能水平居中,對浮動元素和絕對定位元素無效!只對塊狀元素有效。2 text align center 只能對 按鈕 文字等行內元素 display為inline或inl...

關於html中 居中 問題小結

乙個div在body內居中 適用於登入介面登入小視窗 方法一 給div如下屬性 width 500px height 300px background ccc position absolute left 50 top 50 margin left 250px margin top 150px 乙個...