代码之家 › 专栏 › 技术社区 › Mala

在一个向右浮动和一个向左浮动的div之间居中

center css html

Mala · 技术社区 · 14 年前

float: center 不存在,我不能只是浮动到左边,并添加填充,因为它必须根据窗口大小而改变。

有什么简单的事情我忽略了吗?或者我怎么做这种事?

另外,我想找到一种方法,使中间的div居中 在两个分区之间 以防看起来更好。

7 回复 | 直到 14 年前

IonuÈ Staicu 8 年前

float:right div应该放在中间div之前。所以基本上你会有:

左浮动|右浮动|居中

margin:0 auto

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

这应该管用。

几年后编辑

与此同时,一个新的玩具在城里:flexbox。支持是 fairly good (也就是说,如果你不需要支持低于IE10的版本),那么它的易用性就远远超过了floats。

你可以看到一个非常好的flexbox指南 here . 你需要的例子是对的 here .

Leniel Maccaferri 11 年前

事实上,重要的一点是中心div的到来之后标记中的左、右div。看看这个例子,它使用 margin-left: auto 和 margin-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

Leo 8 年前

https://jsfiddle.net/h0zaf4Lp/

<div class="container">
    <div>left</div>
    <div class="center">center</div>
    <div>right</div>
</div>

CSS格式:

.container {
   display: flex;
}

.center {
    flex-grow: 1;
}

calvintennant 11 年前

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

请看这里: http://jsfiddle.net/calvintennant/wjjeR/

Thierry Koblentz 14 年前

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

中间部分将安装在两个浮子之间。

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

注意,源代码顺序在这里很重要:两个float必须先出现,然后是“居中”div。

Tengiz 11 年前

在某些情况下,您有一个限制,无法通过在右浮动div之后移动中间div来更改页面标记。在这种情况下,请按照以下说明操作:

对于容器: position: relative
对于中间部分: position: absolute; left: [containerWidth - middle-width / 2]

-2

MVP 8 年前

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

.container {
  position: relative;
}
.container div {
  width: 200px;
  background: red;
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

https://jsfiddle.net/Helioz/nj548y0g/