Question

我希望我的所有信息都位于中心，如下面的链接所示：

http://jsfiddle.net/EdHEu/

它看起来很好但是当我拉伸/最大化浏览器页面时，布局会通过文本向右移动然后移动框来改变。

这是如何停止的？

谢谢！

詹姆斯

Answer 1

注意：您的链接无效。

如果你的设置是这样的：

<body>
  <div id="main">
    <div id="content">
      <!--Content-->
    </div>
    <div id="sidebar">
      <!--Sidebar-->
    </div>
  </div>
</body>

要使内容居中（为了给页面一个固定的宽度），您需要使用此CSS：

#main {
  width:960px /* Give it a width */
  margin: 0 auto; /* It will Center the #main */
}

这样，您可以为页面指定固定宽度并使布局固定。

Answer 2

为什么不看看this code (jsfiddle)＆amp;看看是否能更清楚地清理它。

HTML:

<div class="content">
    <form class="location" action="weezyresults.php" method="post">

        <div>
            <label for="job">job?</label>
            <div class="input" name="job" >
                <!-- change me back to your inputs, 
                and in the css change '.input' to 'input' -->
            </div> 
            <label>job title or keywords</label>
        </div>

        <div>
            <label for="where">where?</label>
            <div class="input" name="where" >
                <!-- change me back to your inputs, 
                and in the css change '.input' to 'input' -->
            </div> 
            <label>town, city or county</label>
        </div>

    </form>
</div><!-- end .content -->


CSS:

.content {
    margin:0 auto; 
    width:200px;
}

form>div { margin-bottom: 10px; }

form .input {
    background: #ffffff;
    border: 1px solid;
    color: #BDBDBD;
    height:35px;
    margin:2px;
    width: 320px;
}


div>label:first-child {
    color: #585858;
    font: bold 16px helvetica;
    height:20px;
    margin: 4px;
    width: 320px;
}

div>label:last-child {
    color: #585858;
    font:italic 13px HelveticaNeue-Light;
    margin: 4px;
}

Answer 3

.center {
  text-align:center;
  margin:0 auto;
  width: 651px;
}

最大化页面时页面上的布局会发生变化，这是如何停止的？

3 个答案: