在CSS中居中图片是我们在写web时经常需要实现的需求,本文简单的总结几种在css如何使图片居中显示的方式。
1 text-align居中
图片标签img
是一个内联元素,而text-align
属性居中只对块级元素有效,所以我们需要使用div
包含img
,然后设置这个div
的text-align
属性为center
,就可以让图片居中显示了。
如
<div>
<img src="text.png" alt="图片" />
</div>
css设置如下
div {
text-align: center;
}
2 Flex居中图片
对于第1节中的
<div>
<img src="text.png" alt="图片" />
</div>
我们也可以使用flex,我们可以将css设置如下
div {
display: flex;
justify-content: center;
}
上述css可以让图片水平居中显示,如果想要图片垂直居中,则需要将align-items
设置为center
,如
div {
display: flex;
justify-content: center;
align-items: center;
}
3 Grid居中图片
对于第1节中的
<div>
<img src="text.png" alt="图片" />
</div>
我们还可以使用Grid将图片居中,如
div {
display: grid;
place-items: center;
}
上述place-items
的值为center
时,在水平方向和垂直方向都是居中的。
4 使用margin属性将图片居中
如果img
不被div
所包含我们也可以为图片设置自动的左右边距来使其居中。但是和 text-align
属性一样,margin
属性只对块级元素有效。所以我们必须先将img
转换称为块级元素,然后再设置其margin
属性,如
img {
display: block;
margin: 0 auto;
}
在这个基础上我们也可以为图片增加width
属性,用于控制图片显示的宽度
img {
display: block;
margin: 0 auto;
width: 60%;
}
本文作者:StubbornHuang
版权声明:本文为站长原创文章,如果转载请注明原文链接!
原文标题:CSS – 使图片居中显示的方式总结
原文链接:https://www.stubbornhuang.com/2768/
发布于:2023年08月28日 14:18:31
修改于:2023年08月28日 14:18:31
当前分类随机文章推荐
- CSS - 使图片居中显示的方式总结 阅读93次,点赞0次
- CSS - 使用Katex渲染数学公式,数学公式过长超出页面范围的问题修正 阅读64次,点赞0次
全站随机文章推荐
- 深度学习 - 深度学习中的多维数据存储方式NCHW和NHWC 阅读1907次,点赞0次
- 资源分享 - OpenGL Programming Guide (Eighth Edition) OpenGL红宝书英文第8版 英文高清PDF下载 阅读2143次,点赞0次
- Unity - Color32[]转为byte[]字节数组 阅读3747次,点赞1次
- Python - 配置Yolov5出现ImportError: cannot import name 'PILLOW_VERSION' from 'PIL'错误 阅读1730次,点赞0次
- C++ - 使用ffmpeg读取视频旋转角度并使用OpenCV根据旋转角度对视频进行旋转复原 阅读2298次,点赞0次
- 资源分享 - Handbook of Discrete and Computational Geometry, First Edition 英文高清PDF下载 阅读1855次,点赞2次
- GCC - 常用手动链接选项-lz、-lrt、-lm、-lc、-lpthread、-lcrypt、dl链接都是什么库? 阅读68次,点赞0次
- C++ - 将Unicode std::wstring字符串转换为Unicode std::string转义字符,类似于\uxxxx的形式 阅读1928次,点赞0次
- 资源分享 - Ray Tracing from the Ground Up 英文高清PDF下载 阅读2137次,点赞0次
- 资源分享 - Real-Time Rendering, Second Edition 英文高清PDF下载 阅读2269次,点赞0次
评论
169