Vertical Align in CSS

In Cascading Style Sheets (CSS), the vertical-align property manages the vertical positioning of inline-level elements or table cells inside their parent container. This property is relevant for elements that form a line of text or are presented as inline-block or table-cell.

The "vertical-align" attribute is frequently employed with inline components such as images, text, or inline-block elements nestled within a line of text. It doesn't have a direct effect on block-level elements, but alternative methods like flexbox or positioning can be used to achieve vertical alignment.

Syntax:

Here is the fundamental syntax for the vertical-align CSS property:

selector {

  vertical-align: value;

}

The "value" can be one of the following options:

• ✅ Baseline: Aligns the element's baseline with the baseline of its parent element. This is the default value for most elements.
• ✅ Sub: Aligns the element's baseline with the subscript baseline of the parent element's font.
• ✅ Super: Aligns the element's baseline with the superscript baseline of the parent element's font.
• ✅ Top: Align the top of the element with the top of the tallest element on the line within the line box.
• ✅ Text-top: Aligns the top of the element with the top of the parent element's font.
• ✅ Middle: Vertically centers the element relative to the parent element.
• ✅ Bottom: Align the bottom of the element with the bottom of the lowest element on the line within the line box.
• ✅ Text-bottom: Align the bottom of the element with the bottom of the parent element's font.
• ✅ Percentage: The element is aligned vertically at a specified percentage of the line height. For example, vertical-align: 50% will center the element vertically within its parent element.

NOTE: Remember that "vertical-align" has its specific behavior depending on the element type and the context in which it is used, so its effects might not always be straightforward. It is particularly useful for aligning inline elements with text or other inline elements.

Examples

Here are additional insights and illustrations regarding the "vertical-align" attribute in CSS:

1. Baseline Alignment:

• ✅ When using the vertical-align baseline setting, the element's baseline is matched up with its parent element's baseline. This is the standard alignment for the majority of inline-level elements.
Example
Copy
<p style="font-size: 24px;">

  <span style="vertical-align: baseline;"> Baseline </span>

  <span> Other Text </span>

</p>
Try it Yourself

1. Subscript and Superscript:

• ✅ The vertical-align: Sub value aligns the element's baseline with the subscript baseline of the parent element's font, making it appear as a subscript. On the other hand,
• ✅ vertical-align: Super aligns the element's baseline with the superscript baseline of the parent element's font.
Example
Copy
<p>

  H <sub style="vertical-align: sub;"> 2 </sub> O is water.

  x<sup style="vertical-align: super;"> 2 </sup> + y <sup style="vertical-align: super;"> 2 </sup> = r <sup style="vertical-align: super;"> 2 </sup>

</p>
Try it Yourself

1. Top and Bottom Alignment:

• ✅ The vertical-align: Top value aligns the top of the element with the top of the tallest element on the line within the line box. Similarly,
• ✅ vertical-align: The bottom aligns the bottom of the element with the bottom of the lowest element on the line within the line box.
Example
Copy
<p>

  <span style="vertical-align: top;"> Top-aligned </span>

  <span style="vertical-align: bottom;"> Bottom-aligned </span>

</p>
Try it Yourself

1. Middle Alignment:

• ✅ The vertical-align: Middle value vertically centers the element relative to the parent element. This is often used to center icons or images within text.
Example
Copy
<p style="font-size: 24px;">

  <span style="vertical-align: middle;"> This icon is vertically centered </span>

  <img src="https://placehold.co/200x150/1abc9c/ffffff?text=Sample+Image" alt="Icon" style="vertical-align: middle;">

</p>
Try it Yourself

1. Text-top and Text-bottom Alignment:

• ✅ The vertical-align: Text-top value aligns the top of the element with the top of the parent element's font and
• ✅ vertical-align: Text-bottom aligns the bottom of the element with the bottom of the parent element's font.
Example
Copy
<p style="font-size: 36px;">

  <span style="vertical-align: text-top;"> Text-top aligned </span>

  <span style="vertical-align: text-bottom;"> Text-bottom aligned </span>

</p>
Try it Yourself

1. Percentage Alignment:

Utilizing a percentage value in vertical alignment enables precise vertical alignment of the element based on a specified percentage of the line height. For instance, setting vertical-align: 50% will centrally position the element at half of the line height.

Aligning Block-Level Elements Vertically:

To center a block-level element vertically within its parent container, you have the option to employ either the flexbox or grid system.

Centering content vertically on a page can be challenging, especially when the height of the element is unknown.

If the vertical centering of an element with an unknown height is required, a mixture of position and transform can be employed:

Centering multi-line text vertically can be achieved using different CSS techniques.

To center multi-line text vertically inside a container, you can employ a mix of flexbox properties along with a pseudo-element:

Centering Images Vertically in a Container with Various Aspect Ratios:

If you possess images with different aspect ratios that need to be aligned at the center of a container, you can achieve this by employing a mix of flexbox along with object-fit property:

HTML:

<div class="parent">

  <img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Image 1">

  <img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Image 2">

</div>

.parent {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 200px; /* Set the desired container height */

}

img {

  object-fit: contain;

  max-height: 100%;

}

1. Integrating vertical alignment with line height:

You can merge the vertical-align attribute with the line-height property to achieve finer vertical positioning, particularly when dealing with bigger text sizes.

Utilizing the display Property for Alignment:

While vertical alignment typically applies to inline-level elements, adjusting the display property allows you to achieve vertical alignment for block-level elements in certain contexts.

Aligning content vertically in tables can help improve the readability and organization of data within the cells.

The vertical-align attribute is frequently employed in table cells (<td>) to manage the positioning of content inside cells.

td {

  vertical-align: middle;

}

1. Arranging Inline-Block Elements:

You have the option to utilize vertical alignment to align inline-block components within a line of content, such as icons positioned next to text.

<span class="icon">⭐</span> Star Rating

.icon {

  vertical-align: middle;

  font-size: 24px;

}

Here are some instances demonstrating how to manage vertical alignment in various situations. Depending on your particular layout and needs, you may have to adjust or merge these methods to accomplish the intended outcomes. CSS offers a range of resources to effectively deal with vertical alignment in different contexts.

Keep in mind that although the vertical-align attribute serves its purpose, there are more extensive alternatives available for aligning content in various situations, particularly with block-level components. To address intricate layout and alignment needs, it is advisable to delve into contemporary CSS layout methodologies like Flexbox, CSS Grid, or even CSS positioning attributes (like absolute and relative) to accomplish the intended outcomes with greater efficiency and consistency.

Keep in mind that the "vertical-align" property exclusively impacts inline-level elements or cells within tables. Employ strategies such as flexbox, grid layout, or positioning to vertically align block-level elements.

Few More Examples

<!DOCTYPE html>  

<html>  

<head>  

<style>  

table, th, td{

border: 2px solid red;

border-collapse: collapse;

font-size: 20px;

}

#super{

vertical-align: super;

}

#sub{

vertical-align: sub;

}

</style>  

</head>  

<body>  


<table>

<td style="vertical-align: baseline;">baseline</td>

<td style="vertical-align: middle;">middle</td>

<td style="vertical-align: bottom;">bottom</td>

<td style="vertical-align: top;">top</td>

<td style="vertical-align: text-top;">Hi, Welcome to the C# Tutorial. This site is developed so that students may learn computer science related technologies easily. The C# Tutorial is always providing an easy and in-depth tutorial on various technologies. </td>

</table>

<h2> Use of super and sub values </h2>

<h3>Using super value: x<span id="super">2</span>+ y<span id="super">2</span> = r<span id="super">2</span></h3>

<h3> Chemical formula of Water by using sub value: H<span id="sub">2</span>O</h3>

</body>  

</html>

Output

Now, here is a different instance where we are positioning the text in alignment with an image.

Example

<!DOCTYPE html>  

<html>  

<head>  

<style>

div{

font-size: 20px;

border: 2px solid red;

}

img{

width:150px;

height: 100px;

}

img.top {

 vertical-align: text-top; 

 }

img.bottom { 

vertical-align: text-bottom; 

}

img.middle { 

vertical-align: middle; 

}

</style>

</head>  

<body>  

<div>An <img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" /> image with a default alignment.</div>

<div>An <img class="bottom" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" /> image with a text-bottom alignment.</div>


<div>An <img class="middle" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" /> image with a middle alignment.</div>


<div>An <img class="top" src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" /> image with a text-top alignment.</div>

</body>  

</html>

Output

Advantages of Vertical Align in CSS

• ✅ Easy to Use for Inline Elements: The vertical-align property is straightforward for aligning elements, such as images, icons, or text, within a line of text or other elements.
• ✅ Wide Browser Support: The vertical-align property has good browser support and is widely supported across different browsers.
• ✅ Multiple Alignment Options: It provides various alignment options, such as baseline, middle, top, bottom, text-top, text-bottom, subscript, and superscript, giving developers flexibility in aligning elements based on their requirements.
• ✅ Responsive Alignment: It can be used in responsive design to adapt the vertical alignment based on the container's size or available space.
• ✅ Simplicity for Inline Elements: For aligning small elements like icons or images within a line of text, the vertical-align property provides a relatively simple solution without requiring complex layout techniques.
• ✅ Fine-tuning: The property allows for fine-tuning the vertical position of elements, which can be useful for achieving specific design goals.
• ✅ Consistency with Table Cells: In the context of tables, the vertical-align property controls content alignment within table cells. This can help maintain consistency across table-based layouts.
• ✅ Combining with Text: It effectively aligns elements with text content, such as aligning icons or inline labels with adjacent text.
• ✅ Maintaining Aspect Ratios: When aligning images or icons within a line of text, vertical alignment can help maintain the aspect ratio of these elements, especially when combined with appropriate font sizes and line heights.
• ✅ Quick Alignment Fixes: When you need quick fixes for vertical alignment issues, especially in scenarios with mixed content, vertical alignment can provide a quick solution without requiring extensive layout restructuring.
• ✅ CSS Email Styling: In HTML emails, where complex layouts need to be better supported, using vertical alignment can be helpful for basic vertical alignment of elements without relying on external stylesheets or complex techniques.
• ✅ Compatible with display: inline-block: The vertical-align property is compatible with inline-block elements, allowing for easy vertical alignment of such elements within a line.
• ✅ Maintaining Consistency: For elements that are part of tabular data or need to align with similar elements across different rows or columns, vertical alignment can help maintain visual consistency.
• ✅ Browser Compatibility: Unlike some newer CSS techniques, vertical-align has been part of CSS for a long time and enjoys good cross-browser compatibility.

Disadvantages of Vertical Align in CSS

• ✅ Limited to Inline Elements: The most significant limitation of the vertical-align property is that it only works for inline-level elements or table cells. It does not directly apply to block-level elements. This can make vertical alignment more challenging for larger elements or complex layouts.
• ✅ Inconsistent Behavior: Vertical alignment can be tricky and inconsistent, especially with different font sizes, line heights, and nested elements. The same vertical alignment value may produce different results based on the context.
• ✅ Browser Quirks: Some older browsers might have inconsistent interpretations or quirks with the vertical-align property, which can lead to unexpected results. However, this issue has improved with the advancement of modern browsers.
• ✅ Limited Control over Spacing: The vertical-align property primarily deals with aligning elements vertically, but it only offers a little control over the spacing between elements. Adjusting the spacing often requires additional CSS or HTML modifications.
• ✅ Flexbox and Grid as Alternatives: For more complex layout requirements and vertical alignment of block-level elements, developers often rely on Flexbox or CSS Grid, which provide more robust and predictable solutions.
• ✅ Not Suitable for Full-Centering: While vertical alignment is useful for vertically aligning inline elements, it's suitable for full-centering (horizontally and vertically) block-level elements with additional CSS techniques.
• ✅ Misleading Name: The name "vertical-align" can be misleading because it doesn't align the element vertically in the way developers often expect. Instead, it controls the alignment of the element's content within its line box.
• ✅ Complexity with Different Fonts: The behavior of vertical alignment can be unpredictable when dealing with elements of different font sizes and line heights. This can make consistent vertical alignment challenging.
• ✅ Limited for Complex Layouts: It's unsuitable for complex layouts or scenarios where you must vertically align larger, block-level elements within a parent container.
• ✅ Cross-Browser Compatibility: While modern browsers have improved support for vertical alignment, older browsers might still exhibit inconsistencies or unexpected behavior.
• ✅ Alternative Techniques: Modern CSS layout techniques like Flexbox and CSS Grid offer more powerful and predictable ways to handle complex layout requirements, including vertical alignment of both inline and block-level elements.
• ✅ Accessibility Considerations: Using vertical alignment for layout might not be the most accessible approach, as it could interfere with screen readers and other assistive technologies. Semantic HTML and proper CSS techniques are often better choices for accessibility.
• ✅ Debugging Challenges: Debugging unexpected behavior or alignment issues related to vertical alignment can sometimes be tricky, especially when dealing with nested elements and varying font sizes.
• ✅ Evolution of Web Layout: As the web development landscape evolves, new layout techniques like CSS Grid Layout and Flexbox provide more modern and comprehensive solutions for layout challenges, potentially making vertical alignment less relevant for many scenarios.

In general, although the vertical-align attribute is useful for positioning inline elements or table cells along a text line, programmers frequently require different CSS strategies for complex layout and positioning needs, particularly when working with block-level elements or intricate designs. CSS Flexbox and CSS Grid offer robust options for comprehensive alignment and positioning management.

Conclusion

The vertical-align attribute proves beneficial in positioning inline elements within text or table cells. Nevertheless, it possesses constraints and may pose difficulties in achieving precise alignment for intricate layouts or block-level elements. It is advisable for developers to explore contemporary CSS layout strategies that offer enhanced control and adaptability in alignment and placement.