Home » CSS » Align Text and Image Horizontally Using CSS

Align Text and Image Horizontally Using CSS

By

To align text and an image horizontally using CSS, you can use the display: flex; property and the justify-content property. The display: flex; property specifies that the container should be treated as a flex container, which allows the items within it to be aligned along the horizontal and vertical axes. The justify-content property specifies how the items in the flex container should be aligned along the main axis, which is the horizontal axis by default.

Align Text and Image Horizontally Example

Here is an example of how to align text and an image horizontally using CSS:

.container {
  display: flex;
  justify-content: space-between;
}

In this example, the justify-content property is set to space-between, which means that the items in the flex container will be evenly distributed along the main axis, with equal amounts of space between the items.

Here is an example of how the CSS might be used to align text and an image horizontally:

<div class="container">
  <img src="https://www.example.com/image.png" alt="An example image">
  <p>Some text</p>
</div>

And here is an example of what the output might look like:

An example image                                                Some text

In this example, the text and the image are evenly distributed along the main axis, with equal amounts of space between them.

You can also use other values for the justify-content property to align the text and the image in different ways. For example, you can use the center value to center the text and the image along the main axis, or you can use the flex-start value to align the text and the image to the left of the container along the main axis.

Here is an example of how to center the text and the image along the main axis using CSS:

.container {
  display: flex;
  justify-content: center;
}

And here is an example of how to align the text and the image to the left of the container along the main axis using CSS:

.container {
  display: flex;
  justify-content: flex-start;
}

Related: