1

css を使用して HTML フォームを中央(ページの中央) に配置しようとしています。

私はすでに他のメンバーの似たような質問を読みました。しかし、私はこれを理解することはできません

これは HTML フォームです。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/form_style.css">
    <title>My Form</title>
</head>
<body>
    <form   action="#">
          <label for="name">Your Name:</label>
          <input type="text" name="name" id="name" /><br />

          <label for="email">Your Email:</label>
          <input type="text" name="email" id="email" /><br />

          <input type="checkbox" name="subscribe" id="subscribe" />
          <label for="subscribe" class="check">Subscribe</label>
    </form>
</div>
</body>
</html>

これはCSSです：

<style>
form{
  width: 700px ;
  margin-left: 0 auto;
}
label { 
    text-align:right; 
    width:100px; 
}
input { 
    margin-left: 10px; 
}
label.check, label.radio { 
    text-align:left; 
}
</style>

私はかなりの時間を試しました。しかし、それでもフォームを中央に配置できませんでした。ガイダンスはありますか？ありがとう

4

2 に答える 2

7

短縮形のプロパティはmarginではなくmargin-leftです。修正すると、中央に配置されます。

form {
  width: 700px ;
  margin: 0 auto;
}

これがフィドルです：http://jsfiddle.net/Tzr7D/

于 2013-01-29T01:40:13.437 に答える
1

「magin: 0 auto;」フォームを保持しているものからフォームを中央に配置します。フォームを保持するものを追加し、そのものの幅を設定して、フォームを中央に設定することができます。たとえば、このようなテーブルとしましょう

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles/form_style.css">
    <title>My Form</title>
</head>
<body>
<table>
<tr>
<td width="1024px">
    <form   action="#">
          <label for="name">Your Name:</label>
          <input type="text" name="name" id="name" /><br />

          <label for="email">Your Email:</label>
          <input type="text" name="email" id="email" /><br />

          <input type="checkbox" name="subscribe" id="subscribe" />
          <label for="subscribe" class="check">Subscribe</label>
    </form>
</td>
</tr>
</table>
</div>
</body>
</html>

フォームの前にテーブルを追加しました。それを試してみてください。お役に立てれば。

于 2013-01-29T02:52:05.380 に答える