CSS Basic Tutorial

CSS Box Model

CSS3Basic Tutorial

CSS Reference Manual

CSS @rules (RULES)

CSS white-space (whitespace)CSS line-height (line height)

CSS vertical-Align (vertical alignment)

CSS vertical-The align vertical alignment attribute is used to define the vertical alignment of embedded or table cell frames. vertical-Align is one of the important features of CSS. It may be difficult for beginners to master at first. A sample is provided at the bottom of the article to help you quickly understand and master this property.

What can it do

It applies to inline or inline-block elements.
It affects the alignment of the elements without affecting their content. (Except for table cells)
When applied to table cells, it affects the content of the cells rather than the cells themselves.

CSS vertical-vertical alignment value

value	description
baseline	It aligns the baseline of the element with the baseline of the parent element. This is the default value.
length	It is used to increase or decrease the length of the element by a specified length. Negative values can also be used.
%	It is used to increase or decrease the element by the percentage of the 'line-height' attribute. Negative values are allowed.
sub	It aligns the element as if it were an subscript.
super	It aligns the element as if it were a superscript.
top	It aligns the top of the element with the top of the highest element on the line.
bottom	It aligns the bottom of the element with the lowest element on the line.
text-top	The top of the element aligns with the top of the parent element's font.
middle	The element is placed in the middle of the parent element.
text-bottom	The bottom of the element aligns with the bottom of the parent element's font.
initial	It sets this attribute to its default value.
inherit	This attribute is inherited from its parent element.

CSS Vertical Alignment Online Example

Example

<!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
img.top　{　　
　　　　vertical-align:　text-top;　　
}　　
img.bottom　{　　
　　　　vertical-align:　text-bottom;　　
}　　
</<style>　　
</<head>　　
<body>　　
<p><img　src="/run/images/heart.jpg"　alt="heart pattern"/>　This is an image with default alignment.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-top;"　alt="heart pattern"/>　This is an image with text top alignment.</p>　　　
<p><img　src="/run/images/heart.jpg"　style="vertical-align:　text-bottom;"　alt="heart pattern"/>　This is an image with text bottom alignment.</p>　　
</body>　　
</html>

Test see‹/›

Output:

This is an image with default alignment.

This is an image with text top alignment.

This is an image with text bottom alignment.

CSS white-space (whitespace)CSS line-height (line height)