CSS text vertical-align | HTML Example code

There are many ways to Align text using CSS in HTML. You can align vertical text in <div> using simply CSS approaches, Someway are:-

Before start you must know about CSS – What is CSS?

  • Basic approach – For single line only
  • Versatile approach – single line and multiple lines of text
  • Simulating table display
  • Absolute positioning
  • Container element

Examples of CSS text vertical-align

1. Basic approach

It works for a single line of text though, because we set the line’s height to the same height as the containing box element.

Output:

CSS text vertical-align html

2. Versatile approach

This solution will work for a single line and multiple lines of text, but it still requires a fixed height container:

Output:

CSS multiline text vertical align

3. Simulating table display

This way may not work on older browsers that don’t support display: table and display: table-cell (basically just Internet Explorer 7).

4. Absolute positioning

An absolutely positioned element setting top, bottom, left, and right to 0.

5. Container element (display flex)

Just add the following code to the container element:

Note: For cross-browser compatibility for display: flex and align-items, you can use the following:

Source: stackoverflow.com

Do comment if you have any doubts and suggestion on this tutorial.

Note: The All HTML Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.