图片在div中居中
要将一张图片垂直和水平居中在一个 <div>
元素中,你可以使用以下 CSS 样式:
div {
display: flex;
justify-content: center;
align-items: center;
}
img {
max-width: 100%;
max-height: 100%;
}
这里,display: flex;
声明了 <div>
元素是一个 Flexbox 容器,justify-content: center;
和 align-items: center;
使得 Flexbox 容器的内容垂直和水平居中对齐。img
元素的 max-width
和 max-height
样式保证了图片的尺寸不会超过容器的大小,从而可以完整地显示在容器中。
另外,你也可以使用 text-align: center;
将图片水平居中,然后通过设置 line-height
与容器高度相等来使图片垂直居中。例如:
div {
text-align: center;
height: 300px;
line-height: 300px;
}
img {
vertical-align: middle;
}
这里,text-align: center;
让图片水平居中,height
声明了容器的高度,line-height
使得行高等于容器的高度,从而使得图片垂直居中。vertical-align: middle;
则是为了解决图片与行基线对齐的问题。