CSS vertical align | 易学教程

问题

I have a img in floated div and I don't know how to center it vertically.

<div style="height: 300px">
   <img style="height: 50px" src="something" />
</div>

vertical-align: middle of course doesn't work.

http://jsfiddle.net/wKQYj/

回答1:

To vertically-align text within a parent element, and bear in mind that an img is an inline-element and so behaves similarly to text, you can simply set the line-height to the height of the parent element:

div {
    height: 300px;
    line-height: 300px;
}

JS Fiddle demo.

回答2:

The vertical-align CSS style specifies the alignment of text within its text row. This allows you to specify text as superscript or subscript, for example.

So it isn't actually intended to vertically align an element within a box.

There is an explicit exception to this, however -- table cells (ie <td> and <th> elements) use the vertical-align style to do exactly that: align the contents of the cell within the cell.

This exception is something of a quirk - it really shouldn't exist. The CSS designers put it in there in order to allow CSS to reproduce the valign attribute of table elements, which was commonly used by designers in the dark-old days of table-based layouts.

For other elements, aligning the contents of a box vertically in the middle of the it can be a bit of a fine art. There are several techniques:

For single lines of text, simply make the line-height the same as the height of the entire box. You probably won't even need vertical-align for this.
Use display:table-cell; to make the element simulate a table cell, and then use vertical-align. This works, but may have unintended consequences (there are other attributes of table cells that you may not want to simulate).
If you know the height of the element you want to vertically align, you can position it to 50% minus half its height, like this:
```
position:absolute;
top:50%;
height:200px;
margin-top:-100px; /* half the height */
```

There are a few others, but these should get you started.

Hope that helps.

回答3:

For a more modern (IE8+) solution that doesn't use tables, I like this one best.

<style>
/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
</style>

<div class="block"><div class="centered">Centered Content</div></div>

回答4:

vertical-align property is only truly good on td elements. Try something like:

<table>
 <tr>
  <td style='height:300px; vertical-align:center'>
   <img src='something'>
  </td>
 </tr>
</table>

OR since you know the height and width of the img:

<div style='height:300px;'>
 <img style='height:50px; position:relative; top:50%; margin-top:-25px'>
</div>

回答5:

Pretty cool and modern approach (with height specified):

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

回答6:

I'm using the display:box property:

#container {
    display: box;
    box-orient: vertical;
    box-pack: center;  
}

#text {
    vertical-align: middle;
}

See the js-fiddle here: verical align js-fiddle

回答7:

Use the translate property, it's simple and works even in IE:

img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

回答8:

Javascript would probably be the best best to get the image centered in the vertical center for every case. if you can use a library like jQuery it's just a few lines of code.

$(function(){
    var containerHeight = $('#container').outerHeight();
    var imgHeight = $('#logo img').outerHeight();

    var difference = (containerHeight - imgHeight)/2;
    $('#logo img').css({'position' : 'relative', 'top' : difference + 'px'});

});

回答9:

I'm using flex for centering an element. It is effective at making the page more responsive.

div {
    display: flex;
    align-items: center;
}

Please have a look here to learn how to center vertically.

来源：https://stackoverflow.com/questions/4785871/css-vertical-align

标签

html

css

vertical-alignment