How To Center an Image in HTML?
Center an Image in HTML
 |
| HTML |
To center an image in HTML, you can use CSS to apply styling to the image container. Here's an example:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Adjust the height to your needs */
}
</style>
</head>
<body>
<div class="image-container">
<img src="path/to/your/image.jpg" alt="Image">
</div>
</body>
</html>
```
In the example above, a `<div>` element with the class "image-container" is used as a container for the image. The CSS styles applied to the container use Flexbox (`display: flex`) to center the image both horizontally (`justify-content: center`) and vertically (`align-items: center`). The `height` property is set to `100vh` to make the container take up the full height of the viewport. Adjust the `height` value as needed.
Place the path to your image in the `src` attribute of the `<img>` tag and provide an appropriate `alt` attribute for accessibility purposes.
By using the combination of Flexbox and setting the container's dimensions, the image will be centered both horizontally and vertically within the container.
0 Comments