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

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


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


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">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    /* 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;  */        

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


Hope it can help you!