Home >Web Front-end >CSS Tutorial >How to Center an Image Both Horizontally and Vertically Within a Div Using CSS?
How to Center an Image Both Horizontally and Vertically Within a Div Using CSS?
- Susan SarandonOriginal
- 2024-11-24 09:36:12297browse
Aligning an Image Centered and Vertically Aligned Within a Div
For the given HTML snippet:
`<div> 
Adjusting the placement of the image to be centered both horizontally and vertically within the designated div can be achieved using CSS properties.
To horizontally align the image in the center, use:
#over img {
margin-left: auto;
margin-right: auto;
}
This aligns the image to the left and right edges of the div, resulting in a centered placement.
To vertically align the image in the middle, set the image to be a block-level element using:
#over img {
display: block;
}
This allows the image to take the full height of the space available within the div.
The updated HTML and CSS snippets become:
<div>
body {
margin: 0;
}
#over img {
margin-left: auto;
margin-right: auto;
display: block;
}The above is the detailed content of How to Center an Image Both Horizontally and Vertically Within a Div Using CSS?. For more information, please follow other related articles on the PHP Chinese website!