---
title: "Vertical alignment properties"
date: "2017-12-02T20:17:43+00:00"
summary: "Learn how to vertically align elements in CSS with our comprehensive guide. Discover various alignment options, their behaviors, and how to use them effectively for precise layout control."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/vertical-alignment-properties"
id: "4bc4a5b5-32e2-4be3-b91a-d3cd03c29b7a"
---

Set the vertical alignment of an element.

Important

Vertical alignment CSS properties are dependant on the display properties of the parent element. For example, aligning content vertically within a container relies on the container being set to display table-cell.

Vertical alignment
------------------

### Options and behavior:

*   **Baseline** \- Align the baseline of the element with the baseline of the parent element. This is default
*   **Top** \- Align the top of the element with the top of the tallest element on the line
*   **Text top** \- Align the top of the element with the top of the parent element's font
*   **Middle** \- Align the element in the middle of the parent element
*   **Bottom** \- Align the bottom of the element with the lowest element on the line
*   **Text bottom** \- Align the bottom of the element with the bottom of the parent element's font
*   **Subscript** \- Align the element as if it was subscript
*   **Superscript** \- Align the element as if it was superscript
*   **Length** \- Align the element by a specified length. Negative values are allowed.
    *   **Accepted units**
        *   **blank** - Enter a number and the value will be interpreted as pixels
        *   **px** - The value will be applied in pixels
        *   **%** - The value will be applied as a percentage of the elements width and height