How do I align h1, h2 to center in jello layout?

StackOverflow https://stackoverflow.com/questions/20710261

  •  20-09-2022
  •  | 
  •  

Question

I'm sorry if this seems like a stupid question, but I'm just beginning a book on XHTML & CSS and I'm trying to use the so called jello layout, by simply declaring all body content into a container and using it to set the margin to auto in the corresponding style sheet.

The code below is the XHTML followed by the 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;
}

What I want to achieve is this — the content in the form must be in the centre and the text must be center aligned as well. Currently, there seems to be some sort of offset.

I've also created this as per request.

Was it helpful?

Solution

in table style add that :

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

http://jsfiddle.net/AGtKL/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top