How To Horizontally Center Image in HTML & CSS

05 Jul 2023

Are you a beginner web developer struggling with aligning images in the center of your web page? Don’t worry, we’ve got you covered! In this tutorial, we’ll guide you through the process of horizontally centering an image using CSS, the styling language of the web.

Step 1: Wrap Your Image in a Container

The first step is to create a container element for your image. This container will act as a reference point for centering the image. Let’s say your container has the class name image-container, you can create it as follows:

<div class="image-container">
    <img src="your-image.jpg" alt="Your Image">
</div>

Step 2: Apply Styles to the Container

Now that we have our image wrapped in a container, let’s apply some CSS styles to achieve the horizontal centering effect. In your CSS file or within <style> tags in the HTML file, add the following styles for the image-container class:

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

By setting the container’s display property to flex, we can use flexbox properties to easily center the image horizontally. The justify-content: center rule aligns the contents of the container along the horizontal axis.

Step 3: Adjust Image Width (Optional)

If you want to control the width of your image, you can add an additional CSS rule to the img tag inside the container. For example, to set the image width to 50%, you can use:

.image-container img {
    width: 50%;
}

Feel free to adjust the percentage value to your liking.

Step 4: Save and Refresh

Save your HTML and CSS files, or refresh your web page if you’re working directly in the browser. Voila! Your image is now horizontally centered within the container.

Additional Tips

Make sure the container has enough width to accommodate the image. If the container is narrower than the image, it won’t be centered properly.
If you want to center multiple images, create a separate container for each image and apply the same CSS styles.
Experiment with different values and properties to achieve the desired look. CSS offers a variety of options for centering content.