缩小时保持包装纸保持居中

Question

目前，当我缩小时，所有内容都在左侧或右侧。但是我想让内容像 this page for example. Here is the website 一样居中，我想在缩小时让内容居中。

这是正文和包装纸 CSS:

 body {
    background: #0a0a0a none repeat scroll 0 0;
    font: 14px/20px "Conv_Gotham-Medium",Arial,Helvetica,sans-serif;
    height: 100%;
    margin: 0;
    min-width: 320px;
    overflow-y: scroll;
 }

#wrapper{
    position: relative;
    overflow: hidden;
}

Answer 1

保持内容居中的最简单方法是设置 margin: 0 auto 和特定的 width（或 max-width 以使其更具动态性）。 margin: 0 auto 使水平边距均匀填充剩余的 space，而垂直边距保持为 0。

例如如果你的 window 宽度是 1280px 而你的 #wrapper 的宽度是 1000px，那么 margin-left 和 margin-right 都会有 140px，这会导致一个居中的 wrapper

实例：http://codepen.io/anon/pen/QydNYo?editors=110

Answer 2

您似乎使用了 bootstrap 框架。

您是否考虑在 col-md-12 中添加一个额外的 class，最方便的方式是 jQuery 和 css-selectors，或者只是简单的 CSS？

在你的情况下：

$(".webdesign-holder .col-md-12").css("max-width", value);
$(".webdesign-holder .col-md-12").css("margin", "0 auto");

或

.webdesign-holder .col-md-12 {max-width:value;margin:0 auto}

缩小时保持包装纸保持居中

Keeping wrapper remain centered when zooming out

html

css

browser

zooming