对齐设置宽度的CSS元素

我有一个CSS元素，它应该是1000像素的固定宽度。这里是我有的CSS代码：对齐设置宽度的CSS元素

#content 
{ 
    margin:auto; 
    background-color:#DDDDDD; 
    position:absolute; 
    top:110px; 
    width:1000px; 
}

Tis设置宽度，位置和颜色完美，但它总是对齐左侧。我希望整个文本块与中心对齐。我尝试使用HTML来做到这一点：

<div id="content" align="center"> 
Some test content 
</div>

但是，这只能对文本里面的文本，而不是元素本身。这里是什么样子：

http://gyazo.com/b44a28edfecb9cbfc3a5afe93fa08d8a

任何IT对准中心的帮助深表感谢。提前致谢！

来源

2013-06-03 Ryan Sparks

你应该居中div用CSS来代替。

事情是这样的：

#content 
{ 
background-color:#DDDDDD; 
width:1000px; 
margin: 110px auto; /*center the element and set top margin to 110px*/ 
} 

<div id="content"> 
Some test content 
</div>

来源

2013-06-03 21:54:24

删除position:absolute;使其居中居中。

我看不到很多你的html结构。如果您的垂直位置受此影响，然后尝试改变margin:auto到：

margin: 110px auto 0;或margin: 0 auto如果你想从一个绝对位置中心的元素

来源

2013-06-03 21:46:01 Omega

我想水平居中 –

@RyanSparks我知道，我偶然垂直类型！ – Omega

哦，谢谢！我改变它为相对，但它纵向和横向对齐，当我只希望它水平对齐... –

，这一个STIL应该还处于静态上下文。例如：

.absolute { 
    position:absolute; 
    left:0; 
    width:100%; 
} 
.center { 
    width:500px; 
    margin:auto; 
    border:solid; 
} 
.static { 
    padding-top:5em; 
}

来源

2013-06-03 21:54:10

<!DOCTYPE> 
<html> 
    <head> 
     <style> 
      #content{ 
       background-color:#DDDDDD; 
       width:1000px; 
      margin: 0 auto; 
      } 
      #wrapper{ 
      width: 1300px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="content" align="center">Some test content</div> 
     </div> 
    </body> 
</html>

来源

2013-06-03 22:19:35 Yelko

对齐设置宽度的CSS元素

回答

相关问题