CSS - horizontally align text above image

0 points
Created by:

In this article, we would like to show you how to horizontally align text above 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 above 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>

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

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

  <span>Example text outside the flex container...</span>
  <div class="container">
    <span>Example text above image...</span>
    <img src="/static/bucket/1631898942509-VMYrnXyYZv--image.png" alt="dirask-logo" />
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.

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