在浏览器中全屏查看时，我的网页正确对齐，但调整大小后，一切都严重错位。 这是 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>
如何确保无论页面大小如何调整，元素都位于中心？
最佳答案
将文本区域的宽度更改为 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>
关于javascript - 即使调整窗口大小时如何确保元素正确对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16701879/