水平居中

Question

我网站的标题和导航栏具有绝对定位，因此在图像滚动时它们会保持不变。

http://www.mikegarten.com/

我试图将整个网站水平居中。

我尝试使用this method但未成功。

我试图将我的图像放入一个表格然后将其放在div中，但是水平图像的上下空白空间由网格从同一行中的垂直照片创建。

是否可以“包装”此网站，还是需要使用其他方法？

Answer 1

至少有三种不推荐的方法可以横向居中。

• margin: auto（explained at LearnLayout.com）
• ugly hacking of position带有包装元素（问题链接到那个）
• 甚至更加丑陋的position，这次设置position: absolute; left: 50%; margin-left: -<half the width of this box>

我建议使用第一种方法。您必须确保要居中的元素display: block，float: none和position设置为normal或relative。此外，它必须具有有限的宽度（小于其父级的100％），这是显而易见的。

Answer 2

您可以将左侧css属性设置为50％，然后添加一个边距 - 左侧为元素宽度的一半* -1，因此要将您的名称元素居中，将左侧属性设置为50％，将左侧边距设置为-132px;

#name {
    position: fixed;
    top: 20px;
    z-index: 3;
    left: 50%;
    margin-left: -132px;
}

#navtext {
    position: fixed;
    top: 105px;
    background-color: none;
    width: 1000px;
    left: 50%;
    z-index: 3;
    margin-left: -500px;
}

对于3列，您需要将它们放在包装div中，并将其上的宽度设置为所需的宽度，并将margin-left和margin-right设置为auto。

Answer 3

html中有<center></center>个标签，但我认为这已经过时了。 另一种方法是使用CSS将其居中，给它一个宽度和余量：auto;

Answer 4

您已在网站position:absolute上创建了所有网格元素。这就是为什么它不会居中，因为你已经告诉它处于一个确切的位置。此外，如果您将网格包裹在包装div中，这样可以帮助您将它们整体放置。

使用宽度和边距。然后，您可以使用填充来分隔其余的网格元素。