水平居中塊元素,為什麼要用position relative left 50 不能用絕對定位麼?

時間 2021-12-27 19:10:12

1樓:蜂鳥

額開始我也差點繞進去,審查元素發現Wrap一直是 0x0 px 然後才反應過來,absolute是相對wrap不錯,主要是當你設定inner為absolute之後inner就已經脫離文件流了,沒有東西去撐開wrap那wrap就是0x0啊,那麼相當於0x0的父層再怎麼50%偏移都是0啊,所以這就導致了 ,最終效果是 inner的左側邊界處在outer的中線位置上,明白了嗎大胸弟

2樓:那baobao

這個感覺有問題,經過測試,其實inner的left取50%是相對於父級元素的寬度的50%,如果wrap更改寬度則不居中,只是因為wrap並沒設定寬度,由inner撐開,所以寬度就是inner的寬度,左移50%正好移動inner的50%所以居中,另外一直不太明白為什麼設定float:left

3樓:

如圖.wrap 左浮動50%,相當於它的左邊位於 .out 的中線

.inner 左浮動-50%,就相當於以.out的中線為基準左移一般,於是就居中了

.inner 裡的position: relative,就是為了讓 .inner 以 .wrap 為基準左移而不是 .out

這算是一種取巧的方法吧,現在標準中有margin: auto的方法,也有text-align: center的方法,更有display:

box; box-orient: horizontal; 的方法,這種取巧的方式已經越來越少用了。

4樓:凍豆腐

.wrapfloat:leftposition:

relativeleft:50%; 這個50%幹嘛的width: 100%; /* 父元素沒寬度,你讓人家怎麼居中outerwidth:

300pxheight:400pxbackground:#FFCC99innerwidth:

100pxheight:100pxbackground:#C33position:

absoluteleft: 50transform: translateX(-50

為什麼 margin auto 可以讓塊級元素水平居中?

鄭皓文 以下答案並不是針對問題的回答 好像沒有人提到一種使 margin auto 能垂直水平居中的方法,還是說一下吧,萬一能幫到一些人 父元素 子元素 就這樣。 MicroMao 這塊在標準裡稱作 Calculating widths and margins 講width height,margi...

為什麼微軟雅黑的中文標點要設計成水平居中的?

Update,Nov.4.不應該是微軟不知道標點的位置。在微軟雅黑中,引號的位置是正確的。而 UI 版本為半寬的。這說明微軟還是知道這些規則的。那麼可能的原因就是 為了多語言相容 嗎?原答案 說簡單一點就是微軟字型部不知道簡體標點的位置。 譚樊馬克 安卓系統的 DroidSansFallback 也...

分光光度計測定礦物質元素時為什麼要用標準曲線?a組做的標準曲線b組是否可用?為什麼?

漪妹兒 因為每台機器都不一樣,也都需要校準,配標準溶液做標準曲線是個定義標準的過程。測樣品時加的藥品和上次加的是同一批藥品的話可以用之前的曲線,要是換了新配置的藥品也要換。 吉有才 儀器測試狀態受到環境,人員等多重外界因素影響,為了校準儀器,必須加標控制,最常用的就是外標法,以得到相對穩定準確的測試...