将网站内容与中心对齐

Question

我有对齐问题。 这是我的代码。

Html：

<div id="alt">
<p>this is a sample text</p>
</div>

的CSS：

#alt{
display:block; position: absolute; top: 400px; left:500px;  }

使用代码一切看起来都很好。但是当我降低浏览器的缩放级别时。它向左走。我希望它留在中心。帮我解决这个问题。

Answer 1

为了将网站内容与中心对齐，您必须将所有内容放在一个div中，然后将主要div放入其中并将css应用于其中

.main
{
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

Answer 2

使用left:50%代替left:500px; 的CSS：

#alt{
display:block; position: absolute; top: 400px; left:50%;  }

如果您的容器div具有固定宽度，请使用margin: 0 auto;

小提琴：http://jsfiddle.net/X6Vxq/show

Answer 3

尝试以下风格。

#alt
{
    display:block; 
    text-align: center;
    top: 400px; 
    left:500px;  
}

#alt p
{
    margin: 0 auto;
    display: inline-block;
}

Answer 4

如果你的内容存在于div中，那么你可以将相对于div的位置和左边和右边的位置赋予auto。请检查以下代码：

#alt {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

Answer 5

这是一个很难回答的问题，因为您似乎没有给我们足够的信息。您是否希望段落中心对齐或在居中的列中左对齐？

要集中证明，您只需使用：

#alt { text-align: center }

要创建左对齐文本的居中块，请使用：

#alt {
width: 800px; /* Your desired width of the center block */
margin: 0 auto;
}

希望这有帮助