如何在容器中居中浮動的div

是否有可能將浮動的div居中置於容器中，如果是這樣的話？如何在容器中居中浮動的div

例如我有一個容器div包含許多可變大小（動態生成）浮動（左）div的頁面。這些div很常見地溢出到下一行，但它們永遠不會集中在容器div中，而是與左邊一致。它看起來像這樣：

---------------------------- 
-       - 
- +++ +++++ ++++ ++  - 
- +++ +++++ ++++ ++  - 
-       - 
- ++ ++++++ +++ +  - 
- ++ ++++++ +++ +  - 
-       - 
----------------------------

而我想在容器中心這樣浮動的div：

---------------------------- 
-       - 
- +++ +++++ ++++ ++ - 
- +++ +++++ ++++ ++ - 
-       - 
- ++ ++++++ +++ + - 
- ++ ++++++ +++ + - 
-       - 
----------------------------

感謝，

DLiKS

來源

2010-07-23 DLiKS

你搜索在所有的這個問題？ – 2010-07-23 11:46:08

Dupe of：http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div – mikemaccana 2013-01-02 17:30:36

我回答了這個[這裏]（http://stackoverflow.com/a/22218210/703717） – Danield 2014-03-06 07:55:43

這是可能的。作爲源使用http://www.pmob.co.uk/pob/centred-float.htm和http://css-discuss.incutio.com/wiki/Centering_Block_Element。

下面是一個小提琴展示的概念，使用HTML和CSS從下面：https://jsfiddle.net/t9qw8m5x/

<div id="outer"> 
    <ul id="inner"> 
     <li><a href="#">Button 1</a></li> 
     <li><a href="#">Button 2 with long text</a></li> 
     <li><a href="#">Button 3</a></li> 
    </ul> 
</div>

這是所需效果的最小CSS：

#outer { 
    float: right; 
    position: relative; 
    left: -50%; 
} 

#inner { 
    position: relative; 
    left: 50%; 
} 

#inner > li { 
    float: left; 
}

說明：

從li { float: left; }規則開始。然後將這些花車包裹在left: 50%; relative position中，因此<ul>框的左邊緣位於頁面的水平中心，然後使用#outer中的規則進行正確調整，以使#inner的中心與頁面對齊。

來源

2010-07-23 11:46:12 Sarfraz

+12

鏈接的性質是過時的，所以請在回覆中至少提供一個方向，而不要依賴鏈接。 – Slavic 2015-07-31 08:47:37

兩個例子都失敗了，如果浮動線斷裂。第二個artikle有過時的鏈接。 – Daniel 2016-04-05 16:00:36

-6

中心「div」元素的一個很好的技巧是設置「margin：auto」，它將居中。

來源

2010-07-23 11:46:54

+34

不是div如果浮動 – 2012-03-01 12:08:00

寬度必須知道和設置 – chepe263 2013-09-19 21:42:01

-6

<div id='contain'><center><div id='content'>qwerty</div></center></div>

<div id='contain'><div id='content'>qwerty</div></div> 

<style type='text/css'> 

#content { 

    width:200px; 

    height:200px; 

    margin:auto; 
    /* margin:auto; requires width and i think height to be defined in nearly all browsers */ 

    }</style>

來源

2010-07-24 00:58:43 isildur4

+17

已棄用 – 2012-03-01 12:08:28

計算屏幕空間寬度所期望的佈局將佔據然後使母體相同的寬度和應用餘量總量：自動。

.outer { 
 
    /* floats + margins + borders = 270 */ 
 
    max-width: 270px; 
 
    margin: auto; 
 
    height: 80px; 
 
    border: 1px; 
 
    border-style: solid; 
 
} 
 

 
.myFloat { 
 
    /* 3 floats x 50px = 150px */ 
 
    width: 50px; 
 
    /* 6 margins x 10px = 60px */ 
 
    margin: 10px; 
 
    /* 6 borders x 10px = 60px */ 
 
    border: 10px solid #6B6B6B; 
 
    float: left; 
 
    text-align: center; 
 
    height: 40px; 
 
}

<div class="outer"> 
 
    <div class="myFloat">Float 1</div> 
 
    <div class="myFloat">Float 2</div> 
 
    <div class="myFloat">Float 3</div> 
 
</div>

來源

2016-09-05 22:10:23 dimmech

如何在容器中居中浮動的div

回答

相關問題