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.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #div1 {
          height: 100px;
          line-height: 100px;
          text-align: center;
          border: 2px dashed #f69c55;
      }
  </style>

</head>
<body>


  <div id="div1">Hello foo</div>


</body>
</html>

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:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #div1 {
          height: 100px;
          line-height: 100px;
          text-align: center;
          border: 2px dashed #f69c55;
      }
      #span1 {
          display: inline-block;
          vertical-align: middle;
          line-height: normal;
      }
  </style>

</head>
<body>


  <div id="div1">
      <span id="span1">Hello World! <br>
      Eyehunts</span>
  </div>


</body>
</html>

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).

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #div1 {
          display: table;
          height: 100px;
          width: 100%;
          text-align: center;
          border: 2px dashed #f69c55;
      }
      #span1 {
          display: table-cell;
          vertical-align: middle;
      }
  </style>

</head>
<body>


  <div id="div1">
      <span id="span1">Hello World! <br>
      Eyehunts</span>
  </div>


</body>
</html>

4. Absolute positioning

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

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #div1 {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100px;
          width: 100%;
          border: 2px dashed #f69c55;
      }
  </style>

</head>
<body>


  <div id="div1">
    <span>Hello World!</span>
  </div>


</body>
</html>

5. Container element (display flex)

Just add the following code to the container element:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #div1 {
            height: 150px;
            width: 400px;
            background: #000;
            font-size: 24px;
            font-style: oblique;
            color: #FFF;
            text-align: center;
            padding: 0 20px;
            margin: 20px;
            display: flex;
            justify-content: center; /* align horizontal */
            align-items: center; /* align vertical */
        }
    </style>

</head>
<body>


  <div id="div1">Hello World!</div>


</body>
</html>

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

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

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.