中心两个浮动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

回答

相关问题