Question

I want to center the form elements in a div (horizontally and vertically). The whole div should be centered and is between a left and a right div.

Problems:

• Through the padding the right div is misaligned.
• Also the text (Text1) is not correctly vertical aligned. -> padding-top works
• The whole content of the
  form is not horizontal aligned.

Here is an example.

HTML:

<div id="top">
  <div id="top-background-left">&nbsp;</div>
  <div class="external">
    <div class="externalinner">
      <form id="form" name="form" method="post" action="action.html">
        <p style="float: left; padding-right: 10px;">Text1</p>
        <input name="one" id="one" type="text" size="15" maxlength="10" />
        <select name="no" size="1">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2" selected>2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        <button type="submit">Go</button>
      </form>
    </div>
  </div>
  <div id="top-background-right">&nbsp;</div>
</div>

CSS:

#top{
    padding: 0px;
    width: 100%;
    height: 66px;
    background-color: #efa910;
    z-index:12;
    position:fixed;
    overflow:hidden;
}

.externalinner {
    text-align: left;
    padding-top: 20px;
}

.external {
    background: #efa910;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:900px;
}


#top-background-left {
    background: white;
    width: 150px;
    height: 66px;
    float: left;
}

#top-background-right {
    background: white;
    width: 150px;
    height: 66px;
    float: right;
}

Answer 1

As Gareth said here

Moving the <div id="top-background-right">&nbsp;</div> to before the <div class="external"> solves the right div mis-alignment.

As for the text alignment changing your <p> into a <span> and removing float:left from its CSS will make it an inline element with the rest of the form, which will allow you to center it horizontally. (Or you can change float:left into display:inline whatever suits you best.

and finally you will need to remove width: 900px from the .external class. Also the following two lines:

margin-left:auto;
margin-right:auto;

are not needed either, so you can remove them.

Here is the jsFiddle for you.