為什麼「margin: auto」不能與絕對定位的元素一起使用？
發佈於2024-11-16
瀏覽：173
了解絕對定位邊距自動問題
當將“position:absolute”應用於具有“margin-left:auto”和“的元素時margin-right: auto”，您可能會注意到邊距似乎沒有效果。此行為不同於“位置：相對”，其中邊距按預期工作。為了理解這種差異，讓我們更深入地研究底層機制。
當一個元素被絕對定位時，它就會從文件的正常流程中刪除。這意味著它不再與其相鄰元素交互，並且其大小僅由其顯式尺寸或其容器的大小決定。因此，如果未明確設定元素的寬度，則瀏覽器計算的值為“auto”，在大多數情況下為 0。
在這種情況下，應用「margin-left: auto」和「margin-right: auto」嘗試透過將左右邊距設定為元素寬度的一半來在元素周圍建立空間。但是，由於元素的計算寬度為 0，因此計算出的邊距值也變成 0。這就是為什麼邊距似乎沒有效果。
相反，當使用「position:relative」時，元素仍保持在文件的正常流程中。它的大小由它的內容和它在流中佔據的空間決定。當應用「margin-left: auto」和「margin-right: auto」時，邊距是根據元素的實際寬度計算的，在這種情況下，實際寬度不為零。因此，邊距被正確應用，導致元素在其包含元素內居中。
要讓絕對定位的元素居中，您可以指定其寬度和高度，然後使用“position:absolute;left:50” %; 變換: 翻譯(-50%, -50%);"將其置於容器的中心。
最新教學
更多>
-
為什麼我的 PyQt4 按鈕點擊訊號在循環內總是輸出相同的值？在循環中連接 PyQt4 中的槽和訊號在 PyQt4 中，在槽和訊號之間建立連接是事件處理的基本面向。但是，當嘗試連接循環內按鈕發出的多個訊號時，可能會出現意外行為。 為了說明此問題，請考慮以下程式碼：def __init__(self): for i in range(0, 10): ...程式設計 發佈於2024-11-16 -
如何在整個 MySQL 資料庫中執行全域查找和替換？尋找並取代整個 MySQL 資料庫目標是在整個 MySQL 資料庫中執行全域尋找和取代操作。這個問題建議更改以下語法：update [table_name] set [field_name] = replace([field_name],'[string_to_find]','[string_to_...程式設計 發佈於2024-11-16
-
如何在 C++ 中將字串轉換為雙精度數：使用 `std::istringstream` 和 `std::stod` 的簡單指南在C 中將字串轉換為雙精度型在C 中，可以使用std::istringstream 和std::stod 函數將字串轉換為雙精度型。 #include <sstream> double string_to_double(const std::string& s) { std:...程式設計 發佈於2024-11-16
-
如何在 PHP 中組合兩個關聯數組，同時保留唯一 ID 並處理重複名稱？在 PHP 中組合關聯數組在 PHP 中，將兩個關聯數組組合成一個數組是常見任務。考慮以下請求：問題描述：提供的代碼定義了兩個關聯數組，$array1和$array2。目標是建立一個新陣列 $array3，它合併兩個陣列中的所有鍵值對。 此外，提供的陣列具有唯一的 ID，而名稱可能重疊。要求是建構一...程式設計 發佈於2024-11-16
-
為什麼 Lambda 比 C++ 中的普通函數更可優化？與普通函數相比，為什麼Lambda 允許增強編譯器優化Nicolai Josuttis 的C 標準庫（第二版）斷言lambda可以與普通函數相比，編譯器可以更有效地最佳化。這項優勢源自於 lambda 作為函數物件的本質。 當 lambda 傳遞給函數模板時，它會被實例化為專門針對該物件定制的新函數...程式設計 發佈於2024-11-16
-
Bootstrap 4 Beta 中的列偏移發生了什麼事？Bootstrap 4 Beta：列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而，隨著 Beta 2 的後續發布，這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中， offset-md-*...程式設計 發佈於2024-11-16
-
如何有效地從 JavaScript 中的物件陣列中刪除屬性？從物件陣列中有效刪除屬性處理包含多個物件的陣列時，需要從每個物件中刪除特定屬性。雖然使用 for 迴圈的簡單方法就足夠了，但探索利用 ES6 功能和原型操作的替代方法可以帶來更有效率的實作。 ES6 物件解構One這種技術就是 ES6 中引入的物件解構。它可以從物件中提取特定屬性並進一步分配給新變數...程式設計 發佈於2024-11-16
-
Nonce 如何保護 Web 要求免受重播攻擊？如何使用Nonces 保護Web 請求問題用戶找到了利用網站評分系統的請求驗證系統的方法：複製高價值的HTTP 請求。這會損害系統的完整性和可靠性。 解決方案：實現 Nonce 系統Nonce（使用一次的數字）是透過確保特定請求不被執行來防止請求重播攻擊的值。之前做的。這是實現隨機數係統的常見且安全...程式設計 發佈於2024-11-16
-
在 Go 中使用 WebSocket 進行即時通信构建需要实时更新的应用程序（例如聊天应用程序、实时通知或协作工具）需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方！今天，我们将探讨如何在 Go 中使用 WebSocket，以便您可以向应用程序添加实时功能。 在这篇文章中，我们将介绍： WebSoc...程式設計 發佈於2024-11-16
-
如何有效控制JVM記憶體消耗？控制JVM 記憶體消耗為了分配適當的資源以獲得最佳應用程式效能，設定JVM 的最大記憶體至關重要JVM （Java虛擬機器）可以利用。這不僅包括堆內存，還包括正在運行的進程的整個內存消耗。 為了實現這一點，JVM 提供了兩個關鍵的命令列參數：- Xms:: 此參數指定啟動時分配給JVM 的最小記憶體...程式設計 發佈於2024-11-16
-
互動式角鬥士戰鬥模擬|角鬥士之戰.com透過這個互動式角鬥士戰鬥模擬進入競技場！控制兩個強大的角鬥士，每個角鬥士都有獨特的動作，如攻擊、防禦和閃避，並配有動態動畫和即時戰鬥日誌。這款模擬由 GladiatorsBattle.com 提供支持，非常適合古羅馬和戰術遊戲的粉絲。加入戰鬥，體驗鬥獸場的快感！ ...程式設計 發佈於2024-11-16
-
如何正確設定Java URLConnection中的User-Agent？設定Java URLConnection 的使用者代理程式嘗試使用Java 和URLConnection 解析網頁並將使用者代理設定為指定的值時，可以在末尾附加一個額外的“Java/1.5.0_19”。這是由於舊版 Java 的限制所致。 解決方案（Java 1.6.30 及更高版本）在 Java ...程式設計 發佈於2024-11-16
-
讀取檔案時如何刪除文字換行符？消除文本中的換行符在提供的程式碼片段中，您遇到了一個問題，即無意中向每行添加了換行符讀取檔案時。要修正此問題，您可以採用以下策略：選項1：刪除最後一個字元使用切片從讀取行中刪除最後一個字符:read_line = read_line[:len(read_line)-1]選項2：利用字串庫利用字串庫刪...程式設計 發佈於2024-11-16
-
Java 虛擬機器：生命週期與類別載入器Java 虛擬機器 (JVM) 是 Java 生態系統的核心，提供執行 Java 程式碼的所有必要工具。要充分理解它的工作原理，了解該解釋器的生命週期及其對 Java 應用程式的效能和最佳化的影響至關重要。 整個 JVM 生命週期始於一個稱為「JVM Bootstrapping」的基本過程，該過程...程式設計 發佈於2024-11-16
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
