Vertical Align Methods | 易学教程

问题

What are the best methods to vertically-align something relative to it's elements dimensions. As of right now, I'm only aware of vertical-align:middle; working well inside of a <tr>.

Are there any other methodologies that I'm overlooking that can work to procedurally accomplish this goal?

回答1:

Here are 3 very good techniques for vertically centering a child within a container - even when you don't know the height of the child element. The first 2 come from this CSS-tricks article

Markup (for all methods):

<div class="block">    
    <div class="centered">
        Some text
    </div>    
</div>

Solution #1: CSS tables method (FIDDLE)

CSS:

/* This parent can be any width and height */
.block {
  display: table;
   width: 100%;
   background: orange;
   height: 300px;
}


.centered {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   background: pink;
}

Solution #2: Pseudo ('Ghost') element method (FIDDLE)

CSS:

/* This parent can be any width and height */
.block {
  text-align: center;
  background: orange;
  height: 300px;

}

/* 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
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
    background: pink;
}

Solution #3: Flexbox (FIDDLE)

(Relevant) CSS:

.block {
   background: orange;
   height: 300px;
   display: flex;
   align-items: center;
}

回答2:

A great place for you to start is this article by CSS Tricks. It goes over every value that vertical-align can have and the different uses of each in a clear concise way.

Here are the options:

vertical-align: baseline     /* keyword values */
vertical-align: sub
vertical-align: super
vertical-align: text-top
vertical-align: text-bottom
vertical-align: middle
vertical-align: top
vertical-align: bottom

And here are the valid options for table cells:

baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)
Align the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.
top
Align the top padding edge of the cell with the top of the row.
middle
Center the padding box of the cell within the row.
bottom
Align the bottom padding edge of the cell with the bottom of the row.

Additionally, you may want to try some other tricks like setting the line-height equal to the parent container's height.

回答3:

with table you can use

<table>
    <tr>
        <td valign="middle"></td>
    </tr>
</table>

or css

td{
    vertical-align:middle;
}

If you want css vertical align is middle for div use display: table-cell; and display: table;

#abc{
    font:Verdana, Geneva, sans-serif;
    font-size:18px;
    text-align:left;
    background-color:#0F0;
    height:50px;
    display: table;
    width: 100%;
}

#abc span {
    vertical-align:middle;
    display: table-cell;
}

DEMO HERE

回答4:

This might be a surprise to you, but vertical-align has been such a confusing thing that you might get tangled in it even for smallest of divs

Here are some awesome resources to understand it :

Understanding vertical-align, or "How (Not) To Vertically Center Content
vertical-align.com
CSS tricks ( already mentioned i guess )
Last option

The thing that you have to understand is when to use this property and when not => in certain cases, it only applies to tables while in some, you have to opt for pure css methods!

回答5:

My favorite for modal centering is to use a combination of position and translate, as described here: http://css-tricks.com/centering-percentage-widthheight-elements/

In summary:

.center {
    width: 50%; /* or whatever you want your width to be; defaults to 100% */
    height: 50%; /* or whatever you want your height to be; defaults to wrapping content */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

This may or may not work according to your use case, but it's a good trick to have in your toolbox.

来源：https://stackoverflow.com/questions/20763508/vertical-align-methods

标签

html

css

vertical-alignment