<!DOCTYPE html> <html> <head> <title>Live</title> <style> .container { position: relative; max-height: 100vh; /* 设置容器最大高度不超过浏览器高度 / text-align: center; / 水平居中对齐 / display: flex; / 使用flex布局 / justify-content: center; / 水平居中对齐 / align-items: center; / 垂直居中对齐 / } .container img { width: 100%; / 设置图片宽度为100% / height: auto; / 设置图片高度为自适应 / max-height: calc(100vh - 80px); / 设置图片最大高度不超过容器高度减去一定的边距(20px) */ } </style> </head> <body> <div class="container"> <img src="test_data/test.jpg" alt="your_image_description"> </div> </body> </html> 分析上面的代码, 如何让图片水平居中
时间: 2023-06-25 10:07:07 浏览: 142
HTML !DOCTYPE 标签 声明HTML版本
可以在 `.container` 类选择器中添加 `text-align: center;` 属性,将图片水平居中对齐。例如:
```
.container {
position: relative;
max-height: 100vh;
text-align: center; /* 添加text-align属性 */
display: flex;
justify-content: center;
align-items: center;
}
```
另外需要注意的是,图片需要设置为块级元素,可以使用 `display: block;` 或者 `display: inline-block;`。同时,需要将图片的宽度设置为 100%。完整的代码如下:
```
.container {
position: relative;
max-height: 100vh;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.container img {
display: block; /* 或者 inline-block */
width: 100%;
height: auto;
max-height: calc(100vh - 80px);
}
```
阅读全文