center text in div between two div (left and right)

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;
}

score 1 · Answer 1 · answered Jul 18 '12 at 16:30

1

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

If you add a line-height to the p that is the same as height as the form fixes the text mis-alignment.

modified jsFiddle

I don't understand what you mean by the third problem.

answered Jul 18 '12 at 16:30

Gareth

5,693
3
28
37

The content fo the form (Text1, text-box, select, button) should be horizontal aligned. Currently it is aligned to the left. – testing Jul 18 '12 at 16:35

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

As Gareth said here

Moving the <div id="top-background-right"> </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.

edited May 23 '17 at 12:06

Community

1
1

answered Jul 18 '12 at 16:43

Dan

2,321
3
27
40

If I make the window smaller the elements diasappear because of the `overflow: hidden;`. I tried to set a `min-width` on the externalinner but the elements still disappear. Do you have an solution for that? – testing Jul 18 '12 at 16:59
@testing you will need to put `min-width` in the `top` class. Here is a [jsFiddle](http://jsfiddle.net/M5Nh5/12/). – Dan Jul 18 '12 at 17:10
Is there a possibility to make top-background-left smaller if window size is smaller? Now if I have tested with a 1024x768 resolution. In my real example some inputs of the form are missing. – testing Jul 19 '12 at 09:59
@testing You can make the width a percentage `width:10%` for example, and add `max-width:150px` (or whatever value you need) so that it wouldn't get too big on higher resolutions. Though I'd change the CSS on both the right and left divs so they stay the same size. Here's the [jsFiddle](http://jsfiddle.net/M5Nh5/14/) – Dan Jul 19 '12 at 14:14

score 0 · Answer 3 · answered Jul 18 '12 at 16:46

As the other posters already said, line-height is an excellent method to center text vertically.

here is an example without float, using position to arrange the divs.

I added a container around the 3 elements and highlighted the left and right div in green, that you can see them.

tell me if that is fine for you too, or if i was just wrong and you have to find a solution without changing the html source.

jsfiddle example

center text in div between two div (left and right)

3 Answers3