[英]How to ensure that elements are properly aligned even when window is resized?
在瀏覽器中全屏查看時，我的網頁可以正確對齊，但是當調整了頁面大小時，它們的對齊方式會非常糟糕。 這是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>
我如何確保無論頁面大小如何調整，元素都位於中心？
將textarea的寬度更改為600px以填充整個居中的#chatArea div並通過將其h1的邊距更改為以下來使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>
您需要看一下響應式設計
有很多固件可以幫助您
而且所有這些都是基於媒體查詢 @media(max-width:1023px) ，IE8不支持此功能，您可以查看IE8對CSS Media Query的支持，或者使用http://code.google.com/p/css3 -mediaqueries-JS /
編輯
我忘了告訴你，大多數widths都是百分比，例如34.333%
我希望這會有所幫助，並讓您走上正確的道路
這是代碼：
<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>
您可以使用百分比在瀏覽器上調整布局，看看我所做的更改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>
一般方法是將您的身體內容包裝在固定寬度的容器中，左右邊距設置為“自動”以使內容居中。
即
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;
}
Items flex item左對齊和右對齊，當瀏覽器window縮小時如何居中？
[英]Items flex item is left-aligned and right-aligned, how to center it when the browser window is resized down?
調整窗口大小時，可以使用JavaScript重新定位元素嗎？
[英]Is it OK to use JavaScript to reposition elements when window is resized?
當窗口較小時調整窗口大小，即使窗口寬度較大也保持不變
[英]Window resized when window is small and remains same even after window width is larger
滾動頁面時調整窗口大小時如何使此效果起作用
[英]How to make this effect work if the window is resized when page is scrolled
THREE.JS-調整窗口大小時如何保持場景的完整性？
[英]THREE.JS - How to preserve integrity of the scene when the window is resized?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.