CODEWITHSUNDEEP
htmlcss
user70192
user70192

Reputation: 14214

Centering Form with CSS in Table Cell

I have some old HTML. There is not a CSS like framework included. I have to use tables for layout. My challenge is, I'm trying to figure out how to horizontally center my form, but make the fields in the form left-aligned. In other words, I'm trying to create something that looks like this:

+--------------------------------------------------+
|                     Welcome                      |
|           Please tell us about yourself          |
|                                                  |
|     first name            last name              |
|     +----------------+    +----------------+     |
|     |                |    |                |     |
|     +----------------+    +----------------+     |
|                                                  |
|     email address                                |
|     +--------------------------------------+     |
|     |                                      |     |
|     +--------------------------------------+     |
|     [Submit]                                     |
|                                                  |
+--------------------------------------------------+

Currently, my HTML looks like this:

<table style="width:100%;">
  <tr>
    <td style="width:10%;"></td>
    <td style="width:80%; text-align:center;">
      <h1>Welcome</h1>    
      <p>Please tell us about yourself</p>
      <div>
        <form>
          <table style="text-align:left;">
            <tr>
              <td>first name</td>
              <td>last name</td>
            </tr>
            <tr>
              <td><input id="firstName" /></td>
              <td><input id="lastName" /></td>
            </tr>
            <tr><td colspan="2">email address</td></tr>
            <tr><td colspan="2"><input id="emailAddress" /></td></tr>
            <tr><td colspan="2"><input type="submit" value="Submit" />
          </table>
        </form>
      </div>
    </td>
    <td style="width:10%;"></td>
  </tr>
</table>

When the HTML renders on my screen, everything appears. The "Welcome" and "Please tell us about yourself" text is centered as expected. However, my form is not centered. Its aligned flush against the left edge. How do I center my form within the second cell?

Upvotes: 0

Views: 699

Answers (3)

john c. j.
john c. j.

Reputation: 1185

Try this

form {display: inline-block; text-align: center;}

https://jsfiddle.net/sovfa4L8/1/

text-align: center is not necessary. However, it can be a good point for old browsers.

Upvotes: 0

gabesoft
gabesoft

Reputation: 1228

The easiest way to center the form is to set the style of the form to display inline-block like so

form {
  display: inline-block;
}

Upvotes: 0

ray
ray

Reputation: 27275

Add margin: 0 auto to your table?

<table style="width:100%;">
  <tr>
    <td style="width:10%;"></td>
    <td style="width:80%; text-align:center;">
      <h1>Welcome</h1>    
      <p>Please tell us about yourself</p>
      <div>
        <form>
          <table style="text-align:left; margin: 0 auto;">
            <tr>
              <td>first name</td>
              <td>last name</td>
            </tr>
            <tr>
              <td><input id="firstName" /></td>
              <td><input id="lastName" /></td>
            </tr>
            <tr><td colspan="2">email address</td></tr>
            <tr><td colspan="2"><input id="emailAddress" /></td></tr>
            <tr><td colspan="2"><input type="submit" value="Submit" />
          </table>
        </form>
      </div>
    </td>
    <td style="width:10%;"></td>
  </tr>
</table>

Upvotes: 2

Related Questions