HTMLcss怎样让文字覆盖在图片上面，图片上加字

最新推荐文章于 2024-03-22 15:04:49 发布

mengli1_78m

最新推荐文章于 2024-03-22 15:04:49 发布

阅读量3.4w

点赞数 4

分类专栏： XU 文章标签： XUEXI

XU 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用CSS使图片在各种容器中居中显示同时保持原始比例的方法。通过设置display、text-align和vertical-align属性，以及限制图片的最大宽度和高度，确保了图片在不同布局（如float、absolute或fixed）下的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个方框的html 如下，

html css 如何使图片居中且不变形
css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。
其中
display: table-cell;
text-align: center;
vertical-align: middle;
这3行决定居中效果。
其中
img {
max-width: 100%;
max-height: 100%;
}
的目的是让图片可以缩放而比例不变。
div {
float:left;
margin:5px;
padding:5px;
border:1px solid #000;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
html css 如何使图片居中且不变形
效果如下，很好的实现居中
html css 如何使图片居中且不变形
上面是div为float的情况
div如果是absolute或fixed也可以正常表现。
只有一个div的情况下，代码如下

div {
margin:5px;
padding:5px;
border:1px solid #000;
position: absolute;
left:100px;
top:100px;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
html css 如何使图片居中且不变形
这张图片仍然是居中的，没有收到父容器的影响。
html css 如何使图片居中且不变形