即使调整窗口大小，如何确保元素正确对齐？
Posted
技术标签:
【中文标题】即使调整窗口大小，如何确保元素正确对齐？【英文标题】：How to ensure that elements are properly aligned even when window is resized? 【发布时间】：2013-05-18 02:26:31 【问题描述】：当我在浏览器中全屏查看时，我的网页正确对齐，但是当调整大小时，事情会严重错位。 这是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>
如何确保无论页面大小调整后元素都保持在中心位置？
【问题讨论】：
“全屏”是多少像素？ 1024？ 1280？ @mediaqueries、浮点数、百分比。或者使用响应式网格。欢迎来到支持 10000000 种分辨率的世界。 对不起，我该怎么办？ 您应该寻找“响应式”Web 开发，或“移动”，或“自适应”，或“流畅”......对于同一个问题有很多方法。 看看twitter.github.io/bootstrap 【参考方案1】：对此的一般方法是将正文内容包装在一个固定宽度的容器中，并将左右边距设置为“自动”以使内容居中。
即
HTML
<body>
<div class="container">
<!--the rest of your content goes here-->
</div>
</body>
CSS
.container
width:960px; /* or whatever width you would like to set */
margin: 0 auto;
【讨论】：
我认为关于各种响应式框架等的讨论在这里有点超出范围 - 这是一个相当基本的问题。学习基础知识后，继续学习这些内容。【参考方案2】：您可以使用百分比来调整浏览器上的布局，看看我所做的更改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>
【讨论】：
【参考方案3】：代码如下：
<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>
【讨论】：
你不小心离开了由 Colorzilla Chrome 扩展添加的cz-shortcut-listen="true"。
他正在将您的内容包装在一个容器中（使用您的#chatArea div - 注意他将您的 h1 移动到 #chatArea），该容器具有 css 边距：10px auto ... 这种技术在我的回答中进行了一般性描述以下。 “自动”就是它的作用 - 只要容器小于窗口，它基本上就会使您的元素居中。【参考方案4】：
你需要看看响应式设计
有很多FW可以提供帮助
http://foundation.zurb.com/ http://twitter.github.io/bootstrap/而且都是基于媒体查询 @media(max-width:1023px)，IE8不支持这个你可以看看IE8 support for CSS Media Query
或使用http://code.google.com/p/css3-mediaqueries-js/
编辑
我忘了告诉你，大部分widths 都喜欢34.333%
我希望这可以帮助你，让你走上正轨
【讨论】：
【参考方案5】：将 textarea 的宽度更改为 600px 以填充整个居中的 #chatArea div 并将 h1 的边距更改为居中：
margin-left: auto;
margin-right: auto;
完整代码：
<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>
【讨论】：
以上是关于即使调整窗口大小，如何确保元素正确对齐？的主要内容，如果未能解决你的问题，请参考以下文章