如何使div中心在HTML中对齐[重复]

Possible Duplicate:
How to center a div in a div?

可能重复:如何在div中居中?

One simple way to make an object centered in HTML is using align='center', but it's not working for a div.

用align='center' center'创建以HTML为中心的对象的一种简单方法是使用align='center'，但它不适用于div。

I tried:

我试着:

style='text-align:center';
style='left:50%';

I even true a center tag

我甚至真的是一个中心标签

<center>

But I can't make my target div to be center.

但我不能把目标div设为中心。

4 个解决方案

#1

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
  </head>
  <body>

    <div style="text-align: center;">
      <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
    </div>

  </body>
</html>

Tested and worked in IE, Firefox, Chrome, Safari and Opera. I did not test IE6. The outer text-align is needed for IE. Other browsers (and IE9?) will work when you give the DIV margin (left and right) value of auto. Margin "0 auto" is a shorthand for margin "0 auto 0 auto" (top right bottom left).

在IE, Firefox, Chrome, Safari和Opera中测试和工作。我没有测试IE6。IE需要外部文本对齐。其他浏览器(以及IE9?)将在您为auto提供DIV margin(左、右)值时正常工作。“0自动”是“0自动0自动”(左上右下)的缩写。

Note: the text is also centered inside the inner DIV, if you want it to remain on the left side just specify text-align: left; for the inner DIV.

注意:文本也在内部DIV中居中，如果您想让它保持在左侧，只需指定text-align: left;内心的DIV。

Edit: IE 6, 7, 8 and 9 running on the Standards Mode will work with margins set to auto.

编辑:IE 6、7、8和9在标准模式下运行时，边距设置为自动。

#2

I think that the the align="center" aligns the content, so if you wanted to use that method, you would need to use it in a 'wraper' div - a div that just wraps the rest.

我认为align="center"将内容对齐，所以如果你想要使用这个方法，你需要在“wraper”div中使用它——这个div只将其余部分打包。

text-align is doing a similar sort of thing.

text-align也是类似的功能。

left:50% is ignored unless you set the div's position to be something like relative or absolute.

左:50%被忽略，除非您将div的位置设置为相对或绝对。

The generally accepted methods is to use the following properties

普遍接受的方法是使用以下属性

width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;

the margins being auto means they grow/shrink to match the browser window (or parent div)

自动的边距意味着它们可以根据浏览器窗口(或父div)进行扩展或缩小

UPDATE

更新

Thanks to Meo for poiting this out, if you wanted to you could save time and use the short hand propery for the margin.

多亏了Meo把它取出来，如果你想，你可以节省时间，并使用短手属性作为边缘。

margin:0 auto;

this defines the top and bottom as 0 (as it is zero it does not matter about lack of units) and the left and right get defined as 'auto' You can then, if you wan't override say the top margin as you would with any other CSS rules.

这将顶部和底部定义为0(因为它是0，所以没有单位无关紧要)，而左和右定义为“auto”，如果你不想重写的话，可以像使用其他CSS规则那样写上顶部的空白处。

#3

it depends if your div is in position: absolute / fixed or relative / static

这取决于您的div是否位于:absolute / fixed或relative / static

for position: absolute & fixed

位置:绝对和固定

<div style="position: absolute; /*or fixed*/; width: 50%; height: 300px; left: 50%; top:100px; margin: 0 0 0 -25%">blblablbalba</div>

The trick here is to have a negative margin half the width of the object

这里的技巧是让一个负的边距为物体宽度的一半

for position: relative & static

位置:相对和静态

<div style="position: relative; /*or static*/; width: 50%; height: 300px; margin: 0 auto">blblablbalba</div>

for both techniques it is imperative to set de width

对于这两种技术，都必须设置宽度

#4

-1

how about something along these lines

沿着这些线做点什么怎么样

<style type="text/css">
  #container {
    margin: 0 auto;
    text-align: center; /* for IE */
  }

  #yourdiv {
    width: 400px;
    border: 1px solid #000;
  }
</style>

....

<div id="container">
  <div id="yourdiv">
    weee
  </div>
</div>

#1

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
  </head>
  <body>

    <div style="text-align: center;">
      <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
    </div>

  </body>
</html>