Vertically center one of two divs on same line?_问答_开发者

Vertically center one of two divs on same line?

How can we have the text "Create New Position" be vertically centered?

HTML/CSS is below.

Adding margin-top:5px to the "Create new.." div helps but it seems hacky.

<div style="margin-top:5px">
  <div style="float:left">Create new position</div>
  <div开发者_运维百科 style="float:right"><input type="submit" id="x" value="Save"></div>
  <div style="clear: both;"></div>
</div>

The following will work based on creating a line-height which is equivalent for both items.

HTML:

<div class="row">
  <span class="left">Create new position</span>
  <span class="right"><input type="button" value="Save" />
</div>

CSS:

/* REMOVE THIS PORTION FOR YOUR IMPLEMENTATION, IT IS EXAMPLE ONLY */
* { font-family: Tahoma, sans-serif; font-size: 12px; }
.row { border: 1px solid #ccc; }
/* END EXAMPLE ONLY PORTION */

.row { height: 24px; }
.row > span { line-height: 24px; }
.left { float: left; }
.right { float: right; }

The trick is to set the .row containing DIV to be 24px tall, and also set the contained SPAN elements to have a line-height of 24px. By doing this, you tell the browser how much vertical space to take up for the line of text.

Note, however, that 24px is not the important part - the important part is identifying how tall your button is, which is based on your CSS and your selected font for the button itself.

The reason the example I'm giving you works to vertically center in this case is based on the EXAMPLE ONLY CSS I put in at the top - which says the font-size should be 12px. The default browser sizing (at least in Chrome) is then going to provide a little extra margin and padding around the button, as well as a border - which results in a total height of roughly 24px, and this appearance:

Vertically center one of two divs on same line?

The border is created by the example CSS also, and is only there to show you that the vertical alignment is correct. Once you remove .row { border: 1px solid #ccc; }, it will disappear.

Here is a JSBin which shows it working:

http://jsbin.com/otekil/1/edit

The below may help you.

<div align="center">

</div>

So it would look like this maybe:

<div align="center">
<div style="float:left">Create new position</div>
<div style="float:right"><input type="submit" id="x" value="Save"></div>
<div style="clear: both;"></div>

Make the line-height of the interior div the same height as the height of the exterior div.

Example:

<div style="margin-top:5px; height: 100px;">
          <div style="float:left; line-height: 100px;">Create new position</div>
          <div style="float:right"><input type="submit" id="x" value="Save"></div>
          <div style="clear: both;"></div>
        </div>

Slightly different approach but you don't need the floats, vertical-align should work fine in this instance IMO:

<div>
  Create new position:
  <input type="submit" id="x" value="Save" style="vertical-align:baseline;" />
</div>

This method should work in all browsers, is stable, and allows you to easily choose the object to which you want your content centered. The empty container is the only problem I have with this method, but I can easily overlook it when comparing the pros/cons of other methods.

Solution: You use a div at half of the parent's height to push your content block (push_to_center class), then reduce it by half the content height (content class).

In-line style declaration

<div style="float:left; height:50%; margin-bottom:-55px;"></div>
<div style="clear:both; height:110px; position:relative; width:200px;">
    <div style="float:left">Create new position</div>
    <div style="float:right"><input type="submit" id="x" value="Save"></div>
</div>

Complete HTML page (see it working):

<html><head><title>Test Center Div</title>
<style>
  .push_to_center {float:left; height:50%; margin-bottom:-55px;}
  .content {clear:both; height:110px; position:relative;}
</style>
</head>
<body>
    <div class="push_to_center"></div>
    <div class="content" style="width:200px; height:110px;">   
      <div style="float:left;">Create new position</div>
      <div style="float:right;"><input type="submit" id="x" value="Save"></div>
   </div>
</body>
</html>

To exclude the Save button from centering simply move it out of the Content classed div (put it earlier in the page flow if you want it above, and below in the page if you want it at bottom):

I always used such trick:

style="height: 30px; line-height: 30px; vertical-alignment: middle;"

Having fixed height plus the same height as line height plus middle vertical alignment.

Maybe the above are better answers, I'm posting this because it's simple and worked for me. :)

Addressed this by adding margin-top:4px to the "Create Position" div. This was the only solution I could get to work!!

This will work.....

<table style="height:500px;width:100%">
<tr>
<td>
<div style="margin-top:px;vertical-alignment: middle;height: 30px; line-height: 30px;">
              <div style="float:left;">Create new position</div>
              <div style="float:right"><input type="submit" id="x" value="Save"></div>
              <div style="clear: both;"></div>
            </div>
            </td>
            </tr>
            </table>