首页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 19:11:17 浏览: 59

Here's an example of HTML/CSS code that aligns an image vertically in a division that spans vertically on the whole webpage: HTML: ``` <body> <div class="vertical-container"> <img src="your-image.jpg" alt="Your Image"> </div> </body> ``` CSS: ``` body { margin: 0; padding: 0; } .vertical-container { height: 100vh; /* sets the height of the container to 100% of the viewport height */ display: flex; justify-content: center; /* centers the image horizontally */ align-items: center; /* centers the image vertically */ } .vertical-container img { max-width: 100%; /* ensures the image doesn't exceed the width of the container */ max-height: 100%; /* ensures the image doesn't exceed the height of the container */ } ``` In this example, we create a `div` element with a class of `vertical-container` and an `img` element inside it. We use CSS to set the height of the `div` to `100vh`, which sets the height of the container to 100% of the viewport height. We then use `display: flex` to make the container a flex container and `justify-content: center` and `align-items: center` to center the image both horizontally and vertically within the container. Finally, we use `max-width: 100%` and `max-height: 100%` on the `img` element to ensure that the image doesn't exceed the width or height of the container. This code will align the image vertically in the division that spans vertically on the whole webpage.

阅读全文