将网站内容与中心对齐

时间:2013-08-22 04:58:04

标签: html css

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

Html:

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

的CSS:

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

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

5 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:2)

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

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

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

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

答案 2 :(得分:0)

尝试以下风格。

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

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

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

要集中证明,您只需使用:

#alt { text-align: center }

要创建左对齐文本的居中块,请使用:

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

希望这有帮助