我有一个页面,其中一个标题由三个div组成 - 一个浮动到左边,一个浮动到右边,一个放在它们之间.我希望中央div能够居中,但遗憾的float: center是不存在我不能只是将它浮动到左边并添加填充,因为它必须根据窗口大小进行更改.
我有什么简单的东西可以忽略吗？或者我将如何做这样的事情？
更新:
此外,我想找到一种方法,在 div 之间的空间中居中间div ,以防看起来更好.
Ion*_*icu 60
如果你有两个浮动的div,那么你就知道了边距.问题是float:rightdiv应该放在中间div之前.所以基本上你会有:
左浮| 右浮动| 中心
现在,关于利润率:通常你可以使用margin:0 auto,对吧？问题是,现在您知道边距的值:浮动的div!所以你只需要使用:
margin:0 right-floated-width 0 left-floated-width
这应该工作.
与此同时,城里还有一个新玩具:flexbox.支持是相当不错的(即如果你不需要支持低于IE 10)并且易用性超过了浮点数.
你可以在这里看到一个非常好的flexbox指南.你需要的例子就在这里.
Sam*_*ham 42
事实上,重要的部分是该中心的DIV来后,在标记的左侧和右侧的div.看看这个例子,它使用margin-left: auto和margin-right: auto居中的div,这使它居中.
<html>
<head>
<style type="text/css">
#left
{
float: left;
border: solid 1px red;
}
#mid
{
margin-left: auto;
margin-right: auto;
border: solid 1px red;
}
#right
{
float: right;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
<div id="mid">
mid
</div>
</body>
</html>
这是一个测试的JS Bin:http://jsbin.com/agewes/1/edit
通常您可以使用flexbox而不是浮点数:
https://jsfiddle.net/h0zaf4Lp/
HTML:
<div class="container">
<div>left</div>
<div class="center">center</div>
<div>right</div>
</div>
CSS:
.container {
display: flex;
}
.center {
flex-grow: 1;
}