从浏览器缩小时，我的网站布局完全移到浏览器屏幕的左上方吗? [英] My website layout completely shift top left of the browser screenm when I zoom out from my browser?

问题描述

当我从浏览器中缩小时，我的网站布局完全移到浏览器屏幕的左上方吗?

My website layout completely shift top left of the browser screen, when I zoom out from my browser?

当我检查某些网站(例如yahoo.com)并从浏览器中缩小时.它停留在中心.

While when I check some website, like yahoo.com and zoom out from browser. It stays in center.

推荐答案

我知道这个问题有点老了，但也许可以对其他人有所帮助.

I know this question is kind of old, but maybe it can help some other people.

我猜您的布局停留在左侧，因为它没有居中.如果要使布局的元素居中，则必须使用以下CSS代码:

I guess your layout sticks to the left because it is not centered. If you want to center an element of the layout, you have to use the following css code:

.my_element{
  margin: 0 auto;
}

意思是顶部和底部为0像素，左侧和右侧为相同像素"(水平居中).

It means "0 pixel on the top and the bottom, and a same amount of pixels on the left and on the right" (horizontaly centered).

但是要小心，如果元素没有宽度，则不能使用此技巧":

But be careful, you cannot use this "trick" if the element has no width:

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

这是jsfiddle上的 演示 .在此示例中，每个元素都水平居中.

Here is a demo on jsfiddle. In this example, every element is centered horizontaly.

但是我们可以做得更好.在此 第二个演示 中，我们添加了包装器包含每个元素，我们只需将其居中.

But we can do better. In this second demo, we add a wrapper that contains every element and we just have to center it.

如果您不希望布局停留在顶部，则只需在第一个div上设置 margin-top 即可，该div是包装中的 wrapper 我们的示例:

If you don't want your layout to stick to the top, you just have to set a margin-top on the first div, which is the wrapper in our example:

.wrapper{
  margin-top: 20px;
}

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

Note that english is not my native language, if you see some mistakes, please let me know.

这篇关于从浏览器缩小时，我的网站布局完全移到浏览器屏幕的左上方吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！