如何让一个div居中对齐在HTML

可能重复：
How to center a div in a div?如何让一个div居中对齐在HTML

一个简单的方法，使在HTML为中心的对象是使用align='center'，但它不工作了DIV。

我想：

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

我连真正的中心标签

<center>

但我不能让我的目标股利为中心。

来源

2010-04-22 Mac Taylor

您是否试图将div本身或div中的文本居中？ – Welbog 2010-04-22 13:28:16

我在我的问题中提到一个div而不是它的文本。谢谢 – 2010-04-22 13:34:11

为'div'设置宽度，然后使用'margin：0 auto;'：http://jsfiddle.net/spikey/FLL5Z/ – uSeRnAmEhAhAhAhAhA 2014-03-08 19:53:55

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

测试，在IE，火狐，Chrome，Safari和Opera的工作。我没有测试IE6。 IE需要外部文本对齐。其他浏览器（和IE9？）将在您给出自动的DIV边距（左和右）值时起作用。保证金“0 auto”是保证金“0 auto 0 auto”的简写（右上角左下角）。

注意：文本也位于内部DIV的中心，如果您希望它保留在左侧，只需指定text-align：left;为内部的DIV。

编辑：在标准模式下运行的IE 6,7,8和9将使用设置为自动的页边距。

来源

2010-04-22 13:28:01 Tower

我需要设置我的div百分比不固定像素，我认为如果我设置宽度为95％，它不会是中心 – 2010-04-22 13:35:00

你怎么知道他的div是在相对位置还是静态位置？ – meo 2010-04-22 13:36:31

@Mac：这项技术对百分比宽度工作得很好。但是，一般来说，自动保证金的工作必须处于标准模式，对此您需要一个适当的<！DOCTYPE'声明。父母文本对齐中心的解决方法将适用于怪癖模式，但你绝对不希望今天在怪癖模式下写任何东西。 – bobince 2010-04-22 13:37:41

-1

怎么样东西沿着这些路线

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

来源

2010-04-22 13:29:31 espais

这不适用于其他浏览器或标准模式，因为自动边距需要与宽度位于同一个元素上。 – bobince 2010-04-22 13:39:11

它适用于我在怪癖模式以外的其他模式，我不明白恒定的递减投票 – espais 2010-04-22 14:04:53

我认为，在align="center"对齐的内容，所以如果你想用这种方法，你就需要使用它的“wraper” DIV - 一个其余的只是包裹的div。

text-align正在做类似的事情。

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

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

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

边缘是自动装置，它们生长/收缩，以匹配的浏览器窗口（或父DIV）

UPDATE

感谢Meo提出这个建议，如果你想要你可以节省时间，并使用短手的余量。

margin:0 auto;

这个定义顶部和底部为0（因为它是零不要紧约缺乏单位）和左，右方的定义为“自动”然后你就可以，如果你wan't覆盖说出顶部边距，就像你使用其他CSS规则一样。

来源

2010-04-22 13:32:32 thecoshman

您可以使用内联样式作为保证金..保证金：0自动; – meo 2010-04-22 13:35:36

问题是IE无法正确显示div的中心;我试图保证金 - 左 - 右：汽车，但没有在IE上工作 – 2010-04-22 13:51:01

@meo一个公平的观点。通常最好接受你的建议，因为它有助于减少文件大小，但我知道的并不多，但每一点都有帮助。虽然对于指导，它有助于解释“必需”属性以使其起作用。 – thecoshman 2010-04-22 13:53:28

这取决于如果你的DIV是位置：绝对/固定的或相对/静态

的位置是：绝对&固定

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

这里的窍门是有一个负缘的宽度的一半对象

用于位置：相对&静态

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

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

来源

2010-04-22 13:34:59 meo

如何让一个div居中对齐在HTML

回答

相关问题