Css: alignment of images and text (top, bottom, vertical center)

May 23, 2023May 23, 2023 Adelaide vertical-align

Vertical-align attribute is set for inline elements and can not be useed for block-level elements

vertical-align：middle

If you want to be useful for block-level elements, you also need to add the following css style:

dispaly：table-cell

Under normal circumstances, image and text are displayed with the bottom edge aligned. But we are allowed to set vertical-align to the img and span element separately to achieve what we want to dispaly.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* Set vertical-align to the image and span separately to achieve */
    img {
      width: 200px;

      /* center */
      vertical-align: middle;                   

      /* top */
      /* vertical-align: text-top; */

      /* bottom */
      /* vertical-align: text-bottom;  */        
    }  
  </style>
</head>

<body>
  <div class="box">
    <img src="https://programmerlib.com/wp-content/uploads/2020/09/talk_is_cheap-2.jpg" alt="demo">
    <span>alignment of images</span>
  </div>
</body>

</html>

Hope it can help you!

Related posts: