When working with web development, it’s common to come across situations where you need to display an image on a web page. However, simply adding an image to a web page may not always be enough. You may want to adjust the positioning of the image to make it more visually appealing or align it with other elements on the page.
One common technique to achieve this is to center the image using CSS (Cascading Style Sheets). By centering an image, you can ensure that it appears in the middle of the web page or container, regardless of the size or resolution of the device it’s being viewed on. In this response, we’ll explore different ways to center an image using CSS.
How to Center the Image In CSS
Certainly! There are several methods to center an image using CSS, each with its advantages and disadvantages depending on the specific use case. Here are some of the most common techniques:
- Using text-align: center on the parent element: This method works well when the image is a direct child of a block-level element like a
<div>or<figure>. By setting the parent element’s text-align property to center, the image will be horizontally centered within the container. - Using margin: auto: Another way to center an image horizontally is by setting the image’s margin property to auto. This works well when the image has a defined width and height and is a block-level element. The margin:auto rule will center the image horizontally, and the vertical alignment can be adjusted using additional CSS.
- Using flexbox: Flexbox is a popular layout method in CSS that can be used to center an image horizontally and vertically. By setting the parent element’s display property to flex and using the align-items and justify-content properties, you can easily center the image within the container.
- Using grid: CSS grid is another powerful layout method that can be used to center an image. By defining a grid container and setting the image to a grid item, you can use the justify-self and align-self properties to center the image both horizontally and vertically.
Bonus: If you still having issues with aligning the image or element then you can check out our article CSS: How To Center Absolute Position
Text-Align
With the help of text-align we can easily center the image horizontally. In this example, we have a container div that wraps around the image we want to center.
<div class="container"> <img src="your-image-source.jpg" alt="your image"> </div>
We set the text-align property of the container to the center. This centers the image horizontally within the container. However, to ensure the image is centered correctly, we also need to set the display property of the image to block. This ensures that the image takes up the entire width of the container and centers it within the block-level element.
.container {
text-align: center;
}
.container img {
display: block;
}Using Margin: Auto
Here’s an example of how to center an image using margin: auto in CSS, explained step by step with HTML and CSS code:
This HTML code defines a container div that wraps around the image we want to center. The img tag specifies the source of the image and includes an alt attribute for accessibility purposes.
<div class="container"> <img src="your-image-source.jpg" alt="your image"> </div>
First, we define the container element’s width and height to be 100% of its parent element. Then, we set its display property to flex. This allows us to use flexbox properties to center the image horizontally and vertically.
Next, we use justify-content and align-items with a value of center to center the content of the container both horizontally and vertically. This ensures that the image will be centered both ways within the container.
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}Finally, we set the max-width and max-height of the image to 100% to ensure that it resizes proportionally to fit within the container. We then set the margin property of the image to auto. This causes the browser to calculate the margin for both the left and right sides of the image and center it horizontally within its parent container.
.container img {
max-width: 100%;
max-height: 100%;
margin: auto;
}Using flexbox
Here’s an example of how to center an image using Flexbox in CSS, explained step by step with HTML and CSS code:
This HTML code defines a container div that wraps around the image we want to center. The img tag specifies the source of the image and includes an alt attribute for accessibility purposes.
<div class="container"> <img src="your-image-source.jpg" alt="your image"> </div>
First, we set the container element to be a flex container by setting its display property to flex. This allows us to use flexbox properties to center the image horizontally and vertically.
Then, we use justify-content and align-items with a value of center to center the content of the container both horizontally and vertically. This ensures that the image will be centered both ways within the container.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}Next, we set the height of the container to 100vh (viewport height). This ensures that the container is the full height of the viewport, which is useful when centering the image vertically.
Finally, we set the max-width and max-height of the image to 100% to ensure that it resizes proportionally to fit within the container.
.container img {
max-width: 100%;
max-height: 100%;
}Using Grid
You can also center the image within the div using the Grid CSS property. Here is HTML code example.
<div class="container"> <img src="your-image-source.jpg" alt="your image"> </div>
First, we set the container element to be a grid container by setting its display property to grid. This allows us to use grid properties to center the image horizontally and vertically.
Then, we use place-items with a value of center to center the content of the container both horizontally and vertically. This ensures that the image will be centered both ways within the container.
Next, we set the height of the container to 100vh (viewport height). This ensures that the container is the full height of the viewport, which is useful when centering the image vertically.
.container {
display: grid;
place-items: center;
height: 100vh;
}Finally, we set the max-width and max-height of the image to 100% to ensure that it resizes proportionally to fit within the container.
.container img {
max-width: 100%;
max-height: 100%;
}