Languages
[Edit]
EN

CSS - horizontally align text below image

0 points
Created by:
nickkk0
467

In this article, we would like to show you how to horizontally align text below the image using CSS.

Quick solution:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

 

Practical example

In this example, we present how to use flexbox to horizontally align text below the image:

  1. Create flex container using display: flex;,
  2. change flexbox direction to column with flex-direction: column;,
  3. center items horizontally using align-items: center;.
// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    img {
      width: 100px;
      height: 100px;
    }

    .container {
      display: flex;           /*  <--- required  */
      flex-direction: column;  /*  <--- required  */
      align-items: center;     /*  <--- required  */
    }

  </style>
</head>
<body>
  <div class="container">
    <img src="/static/bucket/1631898942509-VMYrnXyYZv--image.png" alt="dirask-logo" />
    <span>Example text above image...</span>
  </div>
  <span>Example text outside the flex container...</span>
</body>
</html>
Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

‚̧ԳŹūüíĽ ūüôā

Join