Enhance your web design skills with this comprehensive guide.
Vertical Alignment in CSS
The vertical-align
property in CSS controls the vertical positioning of elements within a line box. This includes aligning images with text and ensuring elements are properly positioned relative to each other. By using different vertical-align
values, you can achieve various alignment effects, enhancing the overall appearance and readability of your web content.
Syntax
Values
- Keyword Values:
baseline
sub
super
text-top
text-bottom
middle
top
bottom
- Length Values:
10em
4px
- Percentage Values:
20%
- Global Values:
inherit
initial
revert
revert-layer
unset
Examples
To align an element to the baseline of its parent:
To align an element to the top of its parent’s font:
To raise an element by 10 pixels above the baseline:
To position an element 20% above the baseline:
Values for Inline Elements
Parent-Relative Values
baseline
: Aligns the baseline of the element with the baseline of its parent.sub
: Aligns the baseline of the element with the subscript-baseline of its parent.super
: Aligns the baseline of the element with the superscript-baseline of its parent.text-top
: Aligns the top of the element with the top of the parent element’s font.text-bottom
: Aligns the bottom of the element with the bottom of the parent element’s font.middle
: Aligns the middle of the element with the baseline plus half the x-height of the parent.<length>
: Aligns the baseline of the element to the given length above the baseline of its parent.<percentage>
: Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of theline-height
property.
Line-Relative Values
top
: Aligns the top of the element and its descendants with the top of the entire line.bottom
: Aligns the bottom of the element and its descendants with the bottom of the entire line.
Values for Table Cells
top
: Aligns the content to the top of the table cell.bottom
: Aligns the content to the bottom of the table cell.middle
: Aligns the content to the middle of the table cell.baseline
: Aligns the content to the baseline of the table cell.<length>
: Aligns the content to the given length above the baseline of the table cell.<percentage>
: Aligns the content to the given percentage above the baseline of the table cell, with the value being a percentage of theline-height
property.
Examples of vertical-align
in Table Cells
To align the content to the top of a table cell:
To align the content to the middle of a table cell:
To align the content to the bottom of a table cell:
Example Usage
To create a table where cells are aligned differently:
HTML:
CSS:
Basic Example
HTML:
CSS:
Example: Vertical Alignment in a Line Box
HTML:
CSS:
Example: Vertical Alignment in a Table Cell
HTML:
CSS:
Browser Compatibility
The vertical-align
property is widely supported across all major web browsers, ensuring that you can reliably use it to control the vertical alignment of elements in your web designs.
Browser Compatibility Table
Browser | Version | Release Date |
---|---|---|
Chrome | 1.0 | December 2008 |
Edge | 12.0 | July 2015 |
Firefox | 1.0 | November 2004 |
Internet Explorer | 4.0 | September 1997 |
Safari | 1.0 | June 2003 |
Opera | 4.0 | June 2000 |
Practical Tips
- Testing: Always test your web designs across multiple browsers to ensure consistent appearance and functionality.
- Polyfills and Fallbacks: For older browsers that may have limited support for certain CSS properties, consider using polyfills or fallbacks to maintain compatibility.
- Documentation: Refer to the official CSS specifications and browser documentation for the most up-to-date information on compatibility and any known issues.
See Also
For further exploration and understanding of related CSS properties and concepts, you may find the following resources helpful:
- [Typical Use Cases of Flexbox]WebsiteUrl: Learn about the various applications of Flexbox, including how to center items within a container.
- [
line-height
]WebsiteUrl: Understand how theline-height
property affects the vertical spacing of text and how it interacts withvertical-align
. - [
text-align
]WebsiteUrl: Explore thetext-align
property for horizontal text alignment, which complementsvertical-align
for comprehensive text layout control. - [
margin
]WebsiteUrl: Learn about themargin
property and how it can be used to create space around elements, enhancing layout and readability. - [Understanding
vertical-align
]WebsiteUrl: Delve into an in-depth explanation of thevertical-align
property, including its nuances and practical examples. - [Vertical-Align: All You Need To Know]WebsiteUrl: A comprehensive guide on the
vertical-align
property, covering its various uses and best practices. - [HTML Reference Guide]WebsiteUrl: Access a comprehensive reference for HTML elements, which can help you understand how to structure your web content effectively.
We'll be right here with you every step of the way.
We'll be here, prepared to commence this promising collaboration.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.