Div在設定了浮動的情況下水平居中

2021-08-02 08:10:09 字數 1873 閱讀 5298

自己布局的時候發現在設定了div為浮動後再去新增margin:auto屬性是無效的;

eg1:

首先簡單布局一下,在body裡面新增兩個div,乙個父div(div_box),乙個子div (div1),div1設定浮動並且設定margin:auto**如下:

無標題文件title>

.div_box

.div1

style>

head>

class="div_box">

class="div1">

div>

div>

body>

html>效果圖p1:

根據例子eg1,我們把浮動取消試試

**如下:

無標題文件title>

.div_box

.div1

style>

head>

class="div_box">

class="div1">

div>

class="div1">

div>

div>

body>

html>效果圖p2:

從上面例子可以看出只要不設定浮動,div只要設定margin:auto就可以實現居中,那如果要讓兩個div併排並且都居中呢,先來試一下在新增乙個

無標題文件title>

.div_box

.div1

style>

head>

class="div_box">

class="div1">

div>

class="div1">

div>

div>

body>

html>效果圖p3:由於沒有設定浮動,div單佔一行

要想實現水平居中,在div外巢狀乙個居中div,然後再在居中的div裡新增兩個浮動的div

無標題文件title>

.main

.main2

.white

.pink

style>

head>

class="main">

class="main2">

class="white">whitediv>

class="pink">pinkdiv>

div>

div>

body>

html>效果圖

ubuntu在忘記密碼的情況下設定root密碼

喜歡看專業方面的書籍並做筆記,但是寫部落格的習慣還是不多,一方面是看書做的筆記都是很基礎只是,例如一些程式語言的基礎語法什麼的,貼出來可能偶爾會有人基礎語法記不清了會看一眼,但是我覺得既然是寫部落格還是應該寫一些能幫助大家解決實際問題的技術性文章,把自己平時遇到的一些問題的解決方法貼出來和大家一起分...

css各種情況下水平垂直居中的解決方案

情況1 對多行文字的水平垂直居中 條件 父元素高度不為0 解決方案為 父元素設定 這裡值得注意的是 子元素如果是個塊級元素內含文字,要小心內部文字只會繼承text align屬性。原因是vertical align不具備繼承性,text align有繼承性。綜上 該方法子元素,為塊級元素,僅僅生效v...

synchronized在多執行緒情況下的使用

不同業務場景,有時會碰到大量資料的情況,在請求完資料後會通過model對映到對應的陣列或者字典中,從而對陣列進行操作,而多個執行緒同時對同一陣列進行取捨時內容就會出錯,為了避免這種情況可以使用 synchronized關鍵字來宣告來建立乙個互斥鎖,保證此時沒有其它執行緒對鎖定物件進行修改 synch...