2

ブラウザーで全画面表示すると正しく配置された Web ページがありますが、同じサイズを変更すると、ひどく配置がずれます。ここに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>

ページのサイズが変更されても、要素が中央に留まるようにするにはどうすればよいですか?

4

5 に答える 5

2

textarea の幅を に変更して、中央の div600px全体を塗りつぶし、マージンを次のように変更して中央に配置します。#chatAreah1

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>
于 2013-05-22T21:34:49.413 に答える
1

コードは次のとおりです。

<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>
于 2013-05-22T21:37:56.150 に答える