即使调整了窗口大小，如何确保元素正确对齐？

Question

I have a webpage aligned properly when viewed fullscreen in a browser, but when the same is resized things go horribly mis-aligned. 在浏览器中全屏查看时，我的网页可以正确对齐，但是当调整了页面大小时，它们的对齐方式会非常糟糕。 Here's the html. 这是html。

<html>
<head>
<style type='text/css'>
  textarea {
    height:500px;
    width:500px;
    font-size:20;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  }
  input[type="text"] {
    width: 450px;
    height: 30px;
  }
  #chatArea {
    width:600px;
    margin: 10px auto;
  }
  h1
  {
    text-align: center;
    width:600px;
    margin-left:280px;
    margin-right:20px;
    color: brown;
  }
  .greyText
  {
    color:grey;
  }
</style>
</head>

<body>
<h1>Suggestion Box</h1>
<div id="chatArea">
<textarea id='chatHistory' value="Type your suggestion here." ></textarea>
<br/><br/>
<form id= 'chatForm' onsubmit="return false">
    <input name= 'newMessageString' id="newMessageString" type="text" />
    <input type="submit" value='send'/>
</form>
</div>
</body>
</html>

How can I make sure that however the page is resized the elements stay at the center? 我如何确保无论页面大小如何调整，元素都位于中心？

Answer 1

Change the width of your textarea to 600px to fill the entire centered #chatArea div and center your h1 by changing its margins to: 将textarea的宽度更改为600px以填充整个居中的#chatArea div并通过将其h1的边距更改为以下来使h1居中：

margin-left: auto;
margin-right: auto;

Full code: 完整代码：

<html>
<head>
<style type='text/css'>
  textarea {
    height:500px;
    width:600px;
    font-size:20;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  }
  input[type="text"] {
    width: 450px;
    height: 30px;
  }
  #chatArea {
    width:600px;
    margin: 10px auto;
  }
  h1
  {
    text-align: center;
    width:600px;
    margin-left: auto;
    margin-right: auto;
    color: brown;
  }
  .greyText
  {
    color:grey;
  }
</style>
</head>

<body>
<h1>Suggestion Box</h1>
<div id="chatArea">
<textarea id='chatHistory' value="Type your suggestion here." ></textarea>
<br/><br/>
<form id= 'chatForm' onsubmit="return false">
    <input name= 'newMessageString' id="newMessageString" type="text" />
    <input type="submit" value='send'/>
</form>
</div>
</body>
</html>

Answer 2

You need to take a look at responsive design 您需要看一下响应式设计

There are a lot of FW that can help like 有很多固件可以帮助您

And all are based on media queries @media(max-width:1023px) , this is not supported in IE8 you can take a look at IE8 support for CSS Media Query OR use http://code.google.com/p/css3-mediaqueries-js/ 而且所有这些都是基于媒体查询 @media(max-width:1023px) ，IE8不支持此功能，您可以查看IE8对CSS Media Query的支持，或者使用http://code.google.com/p/css3 -mediaqueries-JS /

Edit 编辑

I forget to tell you that most of the widths are percent like 34.333% 我忘了告诉你，大多数widths都是百分比，例如34.333%

I hope this can help and put you on the right track 我希望这会有所帮助，并让您走上正确的道路

Answer 3

Here is the code : 这是代码：

<html><head>
<style type="text/css">
  textarea {
    height:500px;
    width:500px;
    font-size:20;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
  }
  input[type="text"] {
    width: 450px;
    height: 30px;
  }
  #chatArea {
    text-align:center;
    width:600px;
    margin: 10px auto;
  }
  h1
  {
    text-align: center;
    color: brown;
  }
  .greyText
  {
    color:grey;
  }
</style>
</head>

<body cz-shortcut-listen="true">

<div id="chatArea">
<h1>Suggestion Box</h1><textarea id="chatHistory" value="Type your suggestion here."></textarea>
<br><br>
<form id="chatForm" onsubmit="return false">
    <input name="newMessageString" id="newMessageString" type="text">
    <input type="submit" value="send">
</form>
</div>

`</body></html>

Answer 4

you can use percentages to acomodate your layout on the browser take a look at the changes i made http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/ 您可以使用百分比在浏览器上调整布局，看看我所做的更改http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/

 <style type='text/css'>
              textarea {
                height:500px;
                width:500px;
                font-size:20;
                font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
              }
              input[type="text"] {
                width: 450px;
                height: 30px;
              }
              #chatArea {
                width:80%;
                margin: 10px auto;
                display:block;
                text-align:center;
              }
              h1
              {
                text-align: center;
                width:80%;
                margin-left:auto;
                margin-right:auto;
                color: brown;
              }
              .greyText
              {
                color:grey;
              }
            </style>

Answer 5

The general approach for this is to wrap your body content in a fixed-width container with left & right margins set to "auto" to center the content. 一般方法是将您的身体内容包装在固定宽度的容器中，左右边距设置为“自动”以使内容居中。

ie 即

HTML HTML

<body>
    <div class="container">
        <!--the rest of your content goes here-->
    </div>
</body>

CSS CSS

.container {
    width:960px; /* or whatever width you would like to set */
    margin: 0 auto;
}

即使调整了窗口大小，如何确保元素正确对齐？

问题描述

5 个解决方案

解决方案1
2 已采纳 2013-05-22 21:34:49

解决方案2
1 2013-05-22 21:36:37

解决方案3
1 2013-05-22 21:37:56

解决方案4
1 2013-05-22 21:44:07

解决方案5
1 2013-05-22 22:09:00

即使调整了窗口大小，如何确保元素正确对齐？

问题描述

5 个解决方案

解决方案1 2 已采纳 2013-05-22 21:34:49

解决方案2 1 2013-05-22 21:36:37

解决方案3 1 2013-05-22 21:37:56

解决方案4 1 2013-05-22 21:44:07

解决方案5 1 2013-05-22 22:09:00

解决方案1
2 已采纳 2013-05-22 21:34:49

解决方案2
1 2013-05-22 21:36:37

解决方案3
1 2013-05-22 21:37:56

解决方案4
1 2013-05-22 21:44:07

解决方案5
1 2013-05-22 22:09:00