CSS vertical-align attribute details, cssvertical-align

CSS vertical-align attribute details, cssvertical-align
Vertical-align attributes

The vertical-align attribute may be hard to understand in the CSS attribute.

W3CThis attribute defines the vertical alignment between the baseline of an element in a row and the baseline of the row where the element is located.

This article will explain its functions through a series of instance experiments.

[Note: place the mouse over the image in this article to see the guides]

Practice

First, define an HTML structure for the experiment in the HTML body.

It contains a div as the parent element, two images, and a span element, as follows:

<Div> Writing  <span id = "span"> span element </span>  </div>

To make the comparison easier, you need to add some simple styles, as shown below:

Div {border: 1px solid black;/* Add a border to the parent element to facilitate identification */width: 1000px; height: 200px; font-size: 50px; /* set a large font to facilitate comparison */} img # img1 {width: 150px;} # span {display: inline-block; /* Note the inline-block */width: 250px; height: 80px; background-color: yellow;/* set a background color for the span element, easy to recognize */} img # img2 {width: 250px ;}

Because the default value of vertical-align is baseline, the above Code is equivalent to setting the vertical-align: baseline; attribute for the # img1 element.

W3CThe baseline value is interpreted as follows:By default, the element is placed on the base line of the parent element.

The current effect is like this (the black border is the div range of the parent element ):

The second attribute value is vertical-align: top;, W3CThe top value is interpreted:Align the top of the element with the top of the highest element in the row.

In this example, the highest element is image 2 (# img2), as shown below:

The third attribute value is vertical-align: text-top;, W3CThe text-top value is interpreted as follows:Align the top of the element with the top of the font of the parent element.As follows:

The fourth attribute value is vertical-align: middle;, W3CThe value of middle is interpreted as follows:Place this element in the middle of the parent element.

As you can see, alignment is the central part of the parent element text:

The fifth attribute value is vertical-align: bottom;, W3CThe bottom value is interpreted as follows:Align the top of the element with the top of the lowest element in the row.

In this example, the lowest element in the row is the span element, as shown below:

The sixth attribute value is vertical-align: text-bottom;, W3CThe text-bottom value is interpreted as follows:Align the bottom of the element with the bottom of the parent element font.As follows:

You can use a fixed length to indicate the distance between the bottom of the element and the baseline of the parent element, for example, vertical-align: 20px;

A positive value indicates going up, and a negative value indicates going down, as shown below:

The percentage can also be used to indicate the percentage of the baseline movement at the bottom of the element relative to the parent element (baseline) relative to the height of the parent element, such as vertical-align: 40%;

Similarly, a positive value indicates going up, and a negative value indicates going down, as shown below:

Vertical-align attributes can be applied not only to images, but also to other inline elements.

For example, use vertical-align: top; on the span element, as shown below:

Vertical center

As shown in the preceding example, the vertical-align attribute has many possible values.

We can use the value of its middle to construct the vertical center effect of an inlined Row Element in the parent element.

You only need to add an empty span element to the element to be centered.

Set the span element display: inline-block; width: 1px; height: 100%; and add vertical-align: middle;

Add vertical-align: middle to the element to be vertically centered (# img1 in this example;

To horizontally center an element, you can set text-align: center in its parent element (div in this example;

The current HTML structure may look like this:

<div>   <span id="span"></span>   </div>

The current CSS should be like this:

div{  width:1000px;  height:200px;  text-align: center;}img#img1{  vertical-align: middle;}#span{  display: inline-block;   width:1px;  height:100%;  vertical-align: middle;}

The results will look like this:

Second usage

In fact, the vertical-align attribute has a second usage.

Vertical-align can be used under the display: table-cell; element (typically td). At this time, there are four optional values: baseline | top | middle | bottom, for example

This method is relatively simple and will not be described here.

Confusions about vertical-align attributes in css

In general, vertical-align is rarely used because of its poor compatibility.
It is used only in special cases. I never use it where Chinese characters and images need to be aligned.
Vertical alignment can be achieved with height and line-height when the parent element height is certain.
Vertical center also has a certain impact on the font. If the font is different from the font, it may not be absolutely centered.
Vertica-align is not valid in all tags. If there are differences between Chinese and English in td, it is better to add a div to make the div inside the center naturally center.
We recommend that you use the same value of height and line-height when the image and text are centered.

How does one implement the vertical-align attribute in CSS?

Change the display attribute of the span element in ver to blcak as a block element.
# Ver a span {
Display: black
}