将一个div居中对齐

Question

我想让一个 div 元素居中显示，是否可能？在IE浏览器中，text-align: center 无法生效。

- ACP

Answer 1

没有单独居中浮点数的方法。如果您想在另一个块元素内居中一个块元素，请执行以下操作：

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

使用：

#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }

现在这样做不会让文本环绕它（就像使用float left或float right那样），但正如我所说：没有float center。

- cletus

---

对于那些在尝试后仍然感到沮丧的人，请在“#outer”参数中加入“display:inline-block;”。 - BillyNair

我知道这是一个老问题。现在我们可以简单地使用<div align="center">来居中。 - otterb

另外，要覆盖浮点数，请将其设置为“none”。 - Jamaxack

Answer 2

这对我一直有效。

只要为您的DIV设置固定宽度和正确的DOCTYPE，尝试这个方法

div {        
  margin-left:auto;
  margin-right:auto;
}

希望这能有所帮助。

- user1656346

---

这段话的意思是：这个方法也适用于一个没有固定宽度的DIV，只需要添加 display: table; 即可。 - alanaktion

@alanaktion 真是个好建议！ - Alex

Answer 3

通常的技术是 margin:auto

然而，旧版IE不能理解这一点，所以通常会在外部容器元素中添加text-align:center。你可能不认为这会起作用，但同样忽略auto的IE也会错误地将文本居中应用于块级内部元素，因此事情能够得到解决。

但这并没有实现真正的浮动效果。

- DigitalRoss

---

文本居中对于IE浏览器不起作用...Ross可以给我其他的答案吗？ - ACP

请注意，“旧版IE”指的是IE 5.x及更早版本，这在当今大多数人看来并不重要。 - Quentin

你甚至不需要在IE6上执行text-align: center吗？ - brianreavis

仅在 Quirks 模式下 (除非真正特殊的情况，否则您不应使用 Quirks 模式)。 - Quentin

Answer 4

以下解决方案适用于我:

  .algncenterdiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

- Bikram Shrestha

Answer 5

浮动的div通过display:inline-block和text-align:center的组合可以居中显示。

尝试更改外部div的宽度，通过调整jsfiddle窗口大小进行验证。

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

同时还有css：

.outer {
    text-align:center;
    width: 50%;
    background-color:lightgray;
}

.block {
    width: 50px;
    height: 50px;
    border: 1px solid lime;
    display: inline-block;
    margin: .2rem;
    background-color: white;
}

- T. Philipp

Answer 6

我有一个网站，其中包含一个大小可变的 div，您无法提前知道它的大小。它是一个外部 div，带有两个嵌套的 div，外部 div 的宽度与第一个嵌套的 div（即内容）相同，第二个嵌套的 div 在内容正下方，是说明文字，必须居中显示。由于宽度未知，因此我使用 jQuery 进行调整。

所以我的 html 代码如下：

<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>

然后我用jQuery将字幕居中，就像这样

captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");

- chiliNUT

Answer 7

使用“spacer” div来包围您想要居中的div。在流体设计中效果最佳。一定要给spacer设置高度，否则它们将无法正常工作。

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>

- Huuu

Answer 8

这对我很有用。

div.className {
display: inline-block;
margin: auto;
}

- zeah

---

我试图在外部div中浮动动态创建的div。我可以有1或2个div。如果只有1个div，则应该居中浮动，如果有2个div，则并排浮动。希望清楚明白 :) - zeah

Answer 9

这可能会对你有所帮助..：D

div#outer {
  width:200px;
  height:200px;
  float:left;
  position:fixed;
  border:solid 5px red;
}
div#inner {
  border:solid 5px green;
}

<div id="outer">
  <center>
    <div id="inner">Stuff to center</div>
  </center>
</div>

- adarsh mohan

Answer 10

这对我有用。

我在页面上两次包含了一个无序列表。 一个是 div class="menu" id="vertical"，另一个是 div class="menu" id="horizontal"，以便居中显示。由于列表向左浮动，我需要一个内部 div 来使其居中。请参见下面的代码。

<div class=menu id="horizontal">
<div class="fix">
  Centered stuff
</div>
</div>

.menu#horizontal { display: block;  float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }

- Harry The Mad Lurker