html-将div居中在一个向右浮动的div和一个向右浮动的div之间

我有一个页面,其中页眉由三个div组成-一个浮动在左侧,一个浮动在右侧,并且一个在它们之间。 我希望该中央div居中,但遗憾的是2606482252792792071168不存在,我不能只是将其浮动到左侧并添加填充,因为它必须根据窗口大小进行更改。

有什么简单的我可以忽略的吗? 还是我会怎么做?

更新:
另外,我想找到一种在div之间的空间中居中div的方法,以防看起来更好。

Mala asked 2019-11-09T10:42:53Z
7个解决方案
60 votes

如果您有两个浮动div,那么您知道边距。 问题是margin:0 right-floated-width 0 left-floated-width div应该放在中间div之前。 因此,基本上您将拥有:

左浮| 右浮| 居中

现在,讨论一下利润:通常您可以只使用2606482807950950148608,对吗? 问题是,现在您知道边距的值:浮动div! 因此,您只需要使用:

margin:0 right-floated-width 0 left-floated-width

那应该工作。

多年以后

同时,一个新的玩具出现了:flexbox。 支持相当不错(即,如果您不需要支持低于IE 10的支持),并且易用性超过了浮动。

您可以在这里看到一个非常好的flexbox指南。 您需要的示例就在这里。

Ionuț Staicu answered 2019-11-09T10:43:59Z
42 votes

实际上,重要的部分是居中的div位于标记中的左侧和右侧div之后。 看看这个例子,它在居中的div上使用了margin-left: automargin-right: auto,这使它居中。

<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]

Samuel Meacham answered 2019-11-09T10:44:33Z
6 votes

通常,您可以使用flexbox代替float:

[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;
}
Leo answered 2019-11-09T10:45:09Z
4 votes

在两个浮动元素之后都需要指定具有居中内容的元素。 之后,只需将中间元素设置为text-align: center。居中元素中的文本将在浮点数之间挤压。

看这里:[http://jsfiddle.net/calvintennant/wjjeR/]

calvintennant answered 2019-11-09T10:45:41Z
2 votes

试试看(确保使用更好的类名):

.left {
 float:left;
 width:200px;
}
.right{
 float:right;
 width:200px;
}
.center {
 overflow:hidden;
 zoom:1;
}

中心div将适合两个浮点数之间。
如果要在该居中的div和两个浮点之间创建装订线,请在浮点上而不是在中心div上使用边距。

由于“缩放”,CSS将无法验证,但该布局将在IE 5.5和6中工作。

请注意,源顺序在这里很重要:两个浮点数必须先出现,然后是“居中”的div。

Thierry Koblentz answered 2019-11-09T10:46:32Z
0 votes

在某些情况下,您会受到限制,并且无法通过将中间div移到右浮动div之后来更改页面标记。 在这种情况下,请按照以下说明进行操作:

  1. 对于容器:position: absolute; left: [containerWidth - middle-width / 2]
  2. 对于中级div:position: absolute; left: [containerWidth - middle-width / 2]

我希望你有主意。

Tengiz answered 2019-11-09T10:47:16Z
-1 votes

一个简单的解决方案而不必更改div的顺序(有时我们不能这样做)可以是中心div的绝对定位,如下所示:

<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>
<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>
[https://jsfiddle.net/Helioz/nj548y0g/]

MVP answered 2019-11-09T10:47:57Z
translate from https://stackoverflow.com:/questions/3172738/centering-a-div-between-one-thats-floated-right-and-one-thats-floated-left