首页Write an HTML/CSS code to align image vertically in a division that spans vertically on the whole webpage?

Write an HTML/CSS code to align image vertically in a division that spans vertically on the whole webpage?

时间: 2024-02-14 13:14:03 浏览: 86

Sure, here's an example HTML/CSS code to align an image vertically in a division that spans vertically on the whole webpage: ```html <!DOCTYPE html> <html> <head> <title>Vertically Aligned Image</title> <style> html, body { height: 100%; margin: 0; padding: 0; } .container { display: flex; flex-direction: column; height: 100%; justify-content: center; align-items: center; } .container img { max-width: 100%; max-height: 100%; } </style> </head> <body> <div class="container"> <img src="your-image-path.jpg" alt="Your Image"> </div> </body> </html> ``` In this code, we are using `flexbox` to vertically center the image inside the container `div`. The `html` and `body` elements are set to have a `height` of `100%` so that the container can take up the full height of the webpage. The `flex` properties on the container element (`display: flex`, `flex-direction: column`, `justify-content: center`, and `align-items: center`) allow the image to be centered both vertically and horizontally. Finally, we set the `max-width` and `max-height` of the image to `100%` so that it scales to fit inside the container div.

阅读全文