Understanding Vertical-align or "How to center Vertically" < go >

In various technical forums, there are often questions like, "How can I put this thing vertically?" "This question usually follows the phrase," I use it vertical-align:middle , but it doesn't work! ”

There are three reasons for this problem.

1. HTML layouts are not typically designed for vertical rendering. This is natural, the general text occupies the width will automatically expand, the content height is depending on the content and the effective width. Obviously, the horizontal width and landscape layout are easy to implement, and the vertical height and layout passively follow the landscape layout.
2. vertical-align:middleThe reason for not working as expected is usually that the programmer does not understand its correct usage, but ...
3. ... This is also because the CSS specification (in my opinion) has twisted it-depending on vertical-align the circumstances of the use (vertical-align only for inline and Inline-block dependencies ), it actually shows two completely different usages.

Watch the Vertical-align in the demo table cell

When it appears in a table cell, vertical-align the effect will be the same as most people expect, and it will act as if it were (old, discouraged) valign . In modern browsers, the following three kinds of writing effect are the same:

<td valign="middle"> <!-- 这是一种会逐渐被淘汰的用法 --> </td> <td style="vertical-align:middle"> ... </td> <div style="display:table-cell; vertical-align:middle"> ... </div>

In the browser, their actual effect is as follows:

<td>Usevalign="middle"

<td>Usevalign="bottom"

<td>Usevertical-align:middle

<td>Usevertical-align:bottom

<div>Use display:table-cell; vertical-align:middle <div>Use display:table-cell; vertical-align:bottomVertical-align effect on the inline element

However, when vertical-align applied to an inline element, its role is similar (old, discouraged) in the same way as the valign property pair . In modern browsers, the following three kinds of writing effect are the same:

  <span style="display:inline-block; vertical-align:middle"> ... </span>

In the browser, their actual effect is as follows:

In this paragraph, I put two pictures-and-as an example.

In this paragraph, I put two pictures-and-as an example.

In this paragraph, I use <span> display:inline-block
Vertical-align:middle and Display:inline-block
Vertical-align:text-bottom as an example.

The effect of vertical-align on other elements

Technically, a CSS property is not valid on any HTML element. When a novice vertical-align applies a property to a block element (such as a standard <div> ), most browsers apply this attribute to all its inline child elements, in accordance with the principle of inheritance.

So, how do you vertically center an element?

If you are reading this article, you are probably not interested in why your writing is not good. What you're interested in is probably how you can make it work.

Method One

The following method has two (small) prerequisites. If you can make these assumptions, then this approach applies to you:

• You need to place the content that you want to center vertically in a block element and assign a fixed height to the element that you want to center.
• Absolute Positioning (absolutely-position) this element. (This is usually not a problem, because the parent element of the element you want to center on can still use the relative position).

If you can accept the two prerequisites above, then the method is:

1. Specifies whether the parent element is position:relative or position:absolute .
2. Specifies a fixed height for child elements.
3. Sets the child element position:absolute and top:50% moves the child element to a position centered within the parent element.
4. Set the child element margin-top:-yy , where the YY value is half the height of your child element, making up the misalignment of the center.

Here is the CSS code:

<style type="text/css"> #myoutercontainer { position:relative } #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em } </style>

Here is the HTML code:

<div id="myoutercontainer"> <div id="myinnercontainer"> <p>Hey look! I‘m vertically centered!</p> <p>How sweet is this?!</p> </div> </div>

In the browser, the above code will have the following effect:

Sea, look! I'm centered!

Good, isn't it?!

Method Two

This method requires you to meet the following prerequisites:

• There is only one line of text for the content that needs to be centered vertically.
• You need to set a fixed height on the parent element.

If you can accept the above conditions, then the method is:

1. Set the parent element line-height to the height you want.

Watch the Demo

Here's how the CSS code is written:

<style type="text/css"> #myoutercontainer2 { line-height:4em } </style>

Here's how the HTML code is written:

<p id="myoutercontainer2"> 嗨，我竖向居中了，耶！ </p>

In the browser, the above code will have the following effect:

Hey, I'm centered, yes! Transfer from Http://www.webhek.com/vertical-align

Understanding Vertical-align or "How to center Vertically" < go >