Question

如果这看起来像是一个愚蠢的问题，我很抱歉，但我刚刚开始写一本关于XHTML＆amp; amp; CSS和我正在尝试使用所谓的jello布局，只需将所有正文内容声明为容器并使用它在相应的样式表中将边距设置为自动。

下面的代码是XHTML，后跟CSS。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>The Starbuzz Bean Machine</title>
    <link rel="stylesheet" type="text/css" href="starbuzz.css" />
  </head>
  <body>
  <div id="allcontent">
    <h1>The Starbuzz Bean Machine</h1>
    <h2>Fill out the form below and click "order now" to order</h2>
    <form action="processorder.php" method="post">
    <table>
      <tr>
        <th>Choose your beans:</th>
        <td>
          <select name="beans">
            <option value="House Blend">House Blend</option>
            <option value="Bolivia">Shade Grown Bolivia Supremo</option>
            <option value="Guatemala">Organic Guatemala</option>
            <option value="Kenya">Kenya</option>
          </select>
        </td>
      </tr>
      <tr>
        <th>Type:</th>
        <td>
          <input type="radio" name="beantype" value="whole" />
          Whole bean
          <br />
          <input type="radio" name="beantype" value="ground" checked="checked" />
          Ground
        </td>
      </tr>
      <tr>
        <th>Extras:</th>
        <td>
          <input type="checkbox" name="extras[]" value="giftwrap" />
          Gift wrap
          <br />
          <input type="checkbox" name="extras[]" value="catalog" checked="checked" />
          Include catalog with order
        </td>
      </tr>
      <tr>
        <th>Ship to:</th>
        <td>
          <table>
            <tr>
              <td>Name:</td>
              <td>
                <input type="text" name="name" />
              </td>
            </tr>
            <tr>
              <td>Address:</td>
              <td>
                <input type="text" name="address" />
              </td>
            </tr>
            <tr>
              <td>City:</td>
              <td>
                <input type="text" name="city" />
              </td>
            </tr>
            <tr>
              <td>State:</td>
              <td>
                <input type="text" name="state" />
              </td>
            </tr>
            <tr>
              <td>Zip:</td>
              <td>
                <input type="text" name="zip" />
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <th>Customer Comments:</th>
        <td>
          <textarea name="comments" rows="10" cols="48"></textarea>
        </td>
      </tr>
      <tr>
        <th></th>
        <td><input type="submit" value="Order Now" /></td>
      </tr>
    </table>
    </form>
  </div>
  </body>
</html>

body {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  margin: 15px;
}

table {
  border: thin dotted #7e7e7e;
  padding: 10px;
}

h1, h2 {
  text-align: center;
}

th {
  text-align: right;
  vertical-align: top;
  padding-right: 10px;
  padding-top: 2px;
}

td {
  vertical-align: top;
  padding-bottom: 15px;
}

table table {
  border: none;
  padding: 0px;
}

table table td {
  text-align: right;
  padding-bottom: 0px;
}

#allcontent {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}

我想要实现的是 - 表单中的内容必须位于中心，文本也必须居中对齐。目前，似乎有某种抵消。

我还根据请求创建了this。

Answer 1

表格样式中的

添加：

table {
...
    margin: auto; 
...
}

http://jsfiddle.net/AGtKL/

如何将h1，h2与jello布局中心对齐？

1 个答案: