中心兩個浮動divs

我有一個div容器，其中包含兩個其他div應該彼此相鄰排列。但是這兩個浮動的div應該位於外部div的中心。我怎樣才能做到這一點？中心兩個浮動divs

HTML：

<div class="section-download clearfix"> 
<div class="section-download-cover">bla</div> 
<div class="section-download-icon">yes</div> 
</div>

CSS：

.section-download { 
    margin: 0 auto; 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
} 

.section-download-cover { 
    float:left; 
} 

.section-download-icon { 
    float: left; 
}

謝謝！

來源

2013-10-17 Torben

你爲什麼浮動，如果你不希望他們離開他們在左邊？ –

如果你想讓他們居中，你爲什麼要漂浮他們？居中包含div的內容並確保兩個內部div的顯示都是內聯塊。 – user2250471

你需要設置內部divs的寬度，它們不會神奇地居中對齊。將width: 50%;添加到每個內部div。

來源

2013-10-17 18:32:45 ryanulit

這應該做你想要什麼：

.section-download { 
    margin: 0 auto; 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    text-align: center; 
} 

.section-download-cover, 
.section-download-icon { 
    display: inline-block; 
}

您設置text-align爲中心，然後作出的div是inline-block這使得他們與文本流，並因此拿起了text-align: center

來源

2013-10-17 18:33:44

您可以將父項設置爲display:inline-block，並使用text-align:center將其居中。

工作得很好 - jsFiddle here

HTML

<div id="parent"> 
    <div class="float"></div> 
    <div class="float"></div> 
</div>

CSS

#parent { 
    display:inline-block; 
    border:3px solid red; 
} 
.float { 
    float:left; 
    width:100px; 
    height:100px; 
    border:1px solid black; 
}

來源

2013-10-17 18:36:21

你的問題是模糊的;但在我看來，你是說你希望兩個在外框中間相互對齊？

QUOTE：
"which should be aligned next to each other...in the center of the outside div"

如果這是你想要的東西，那麼你需要的高度和寬度添加到每個內框。就像這樣：

.section-download-cover { 
    float:left; 
    width: 70px; 
    height: 155px; 
    background: #333; 
} 

.section-download-icon { 
    float: left; 
    width: 70px; 
    height: 150px; 
    background: #555; 
}

UPDATE：你還需要添加另一個div嵌套做什麼，我想你問。
我把它叫做.inner-container，它需要和兩個內部div的寬度相同。例如，如果每個div的寬度爲70px，那麼外部div的寬度必須恰好爲140px。

的CSS

.inner-container { 
    margin: 0 auto; 
    width: 140px; 

}

的HTML

<body> 
    <div class="section-download clearfix"> 
    <div class="inner-container"> 
     <div class="section-download-cover"> 
      bla 
     </div> 
     <div class="section-download-icon"> 
     yes 
     </div> 
    </div> 
    </div> 
</body>

工作jsbin：
http://jsbin.com/OXEPERi/1/

來源

2013-10-17 18:52:42 Accelerator

中心兩個浮動divs

回答

相關問題