2

//抱歉格式不好，我在用手机...

当有人问如何使页面居中时，响应如下：

margin-left:50%;
left:(-1/2 width);

我在一个宽度为 1000 像素的网站上使用了这段代码，所以它涉及到该网站不适合的屏幕。现在，该站点以较小的屏幕为中心，左右移动。

假设我们的屏幕是 600px 宽：

200px are left
600px are on screen 
200px are right

您可以滚动到右侧，但左侧的像素无法到达...

我该如何解决这个问题来控制，如果屏幕较小，我的网站有多少被拖到左边？这对手机来说尤其重要...

4

3 回答 3

2

如果您担心不同的屏幕尺寸，那么我强烈建议您使用媒体查询，但这也是设置居中元素的有用方法。只需使用%宽度而不是设定宽度，然后margin: 0 auto;

查看小提琴以获得视觉帮助。（如果这个答案根本不适合您的需求，那么我很乐意将其删除）

div {
  margin: 0 auto;
  width: 80%;
  height: 500px;
  background: mediumSeaGreen;
}

JSFIDDLE

你最好的选择（忽略我的投资组合中的 CSS。

.subMenu {
  display: none;
  float: none;
  width: 100%;
  background: rgba(254, 126, 1, 0.5);
  border-bottom: 5px solid rgba(0, 0, 0, 0.6);
  font-size: 20px;
  padding-left: 60%;
  position: relative;
  left: 0;
  top: 3.85em;
  list-style-type: none;
  padding: 1.5em 0;
  margin: 0;
  overflow: hidden;
}

@media only screen and (max-width: 680px) {
 .subMenu {
    top: 4.9em;
    font-size: 10px;
    min-height: 100% !important;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
  }
}

您还可以使用 jQuery 动态查找宽度。

var width = $('div').width();

$('div').text(width);
于 2013-10-17T15:59:14.000 回答
1

用这个：

margin: 0 auto;
width: 400px;

选择：

margin: 0 auto;
width: 50%;

另一种选择：

#outer-div {
    margin: 0 auto;
    width: 50%;
}

#inner div {
    /* insert any CSS you want here */
}

注意1：使用时margin: 0 auto，您需要定义宽度，否则它不会居中。

注意 2：你应该把它放在另一个盒子里，或者让页面宽度为 100%（或比盒子更大的宽度）。

注意 3：您不能使用边距垂直居中：自动自动。这根本行不通。有关此问题的解决方案，请参见下文：

水平和垂直居中的框：

在 jsbin 中工作：http:
//jsbin.com/OSUViFi/1/

代码（jsbin同上）：

page.html

  <div id="outer-container">
    <div id="inner-container">
      <div id="centered-box">
      </div>
    </div>
  </div>

样式.css

#outer-container {
    width: 100%;
    height: 100%;
    display: table;
    position:absolute;
    overflow: hidden;
}
#inner-container {
    display: table-cell;
    vertical-align: middle;
}
#centered-box {
    margin: 0 auto;
    height: 400px;
    width: 400px;
  background: #000;
}

特定于您的需求（不包括看起来您不需要的垂直对齐）：

jsbin 示例：http:
//jsbin.com/axEZOTo/2

代码（jsbin同上）：

page.html

<div id="container">
    <div id="centered-box">
    </div>
</div>

样式.css

#container {
    width: 1000px;
    margin: 0 auto;
    height: 100%;
    background: #999;
}
#centered-box {
    max-width: 70%;
    min-width: 200px;
    height: 500px;
    margin: 0 auto;
    background: #000;
}

在这里，它可以达到的最小值是 200 像素，您可以将此数字更改为您希望盒子拥有的最小数量。

笔记：

我终于明白了你在你的问题中想说什么，这个问题措辞不好。

您只使用了 600px 作为示例，但您真的只想让它成为一个随屏幕大小而变化的流畅布局。

于 2013-10-17T15:52:05.657 回答
1

你可以尝试使用margin: auto

http://jsfiddle.net/56N9w/

如您所见，如果您使窗口太小而无法容纳内容，则默认情况下将左对齐

于 2013-10-17T15:49:23.903 回答