css
  1. css-vertical-align
PreviousNext

CSS Vertical Align

  • CSS Vertical Align is a property that enables developers to align an element vertically in a container.
  • This allows you to center or align text or other content within a container, such as a div or table cell.

Syntax

vertical-align: value;

The value parameter specifies the vertical alignment for the element. Examples of valid values include top, middle, bottom, baseline, sub, and super.

Example

Here is an example of using CSS Vertical Align:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Vertical Align Example</title>
    <style>
        .container {
            height: 200px;
            width: 400px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .content {
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <p class="content">Hello, this text is vertically centered!</p>
    </div>
</body>
</html>
Try Playground

Explanation

In this example, we create a container with a specific height and width and a solid black border using CSS. We then use the display: flex property along with the align-items: center and justify-content: center properties to center the inner content vertically and horizontally.

Use

CSS Vertical Align can be particularly useful if you need to align text or other content vertically within a container. It can also be used to align images or other media in a consistent way across your site or application.

Important Points

  • CSS Vertical Align only works within a container, and is often used in conjunction with other styling properties like display: flex or position: absolute.
  • The vertical-align property only works on inline-level and table-cell box elements.

Summary

CSS Vertical Align is a powerful way to align text and other content vertically within a container. While it can sometimes be tricky to get right, it's an important skill to master for any front-end developer, and can help you create beautiful and responsive designs that look great on any device.

User SelectWriting Mode
Published on: