html - 使网站内容居中对齐

Question

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

html:

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

CSS：

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

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

score 3 · Accepted Answer

要将网站内容对齐到中心，您必须将所有内容放在一个 div 中，比如主 div 并对其应用下面的 css

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

score 2 · Accepted Answer

使用left:50%而不是left:500px; css：

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

要居中证明，您可以简单地使用：

#alt { text-align: center }

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

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

希望这可以帮助

score 0 · Accepted Answer

试试下面的风格。

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

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

5 回答 5