当我从浏览器缩小时，我的网站布局完全转移到浏览器屏幕的左上角？

Question

当我从浏览器缩小时，我的网站布局完全转移到浏览器屏幕的左上角？

当我查看某个网站时，例如yahoo.com并从浏览器中缩小。它保持在中心位置。

Answer 1

我知道这个问题有点陈旧，但也许它可以帮助其他人。

布局贴在左边

我猜你的布局贴在左边，因为它没有居中。如果要将布局元素居中，则必须使用以下css代码：

.my_element{
  margin: 0 auto;
}

这意味着“顶部和底部的0像素，左侧和右侧的像素数量相同”（水平居中）。

但是要小心，如果元素没有宽度，你不能使用这个“技巧”：

.my_element{
  margin: 0 auto;
  width: 300px;
}

这是jsfiddle的demo。在此示例中，每个元素都以水平方向为中心。

但我们可以做得更好。在这个second demo中，我们添加了一个包装器，其中包含每个元素，我们只需将其置于中心位置。

布局贴在顶部

如果您不希望布局贴在顶部，则只需在第一个div上设置 margin-top ，即包装我们的例子：

.wrapper{
  margin-top: 20px;
}

请注意，英语不是我的母语，如果您发现错误，请告诉我。