CSS 将文章中图片自动居中
对于一个运营超过500+站点的我来说.作为文章的图片居中是不可避免的事情,每次都会需要对应的调整,十年前记录,今天还得记录,详细一下有多重要.
早些年是利用在图片的标签内写居中,现在都是css自适应居中.这里是最佳的办法.毕竟对于数据多的人来说,几个代码可以改变全局,还不影响搜索降权.
何乐而不为…🙄
margin: 0px auto;
display: block;大家也不要小看这个代码, 定义块级元素,自适应居中,如果你的图片超过样式框,可添加 max-width: 700px;来定义.
这中相对值可以在移动端也有很好的展示.
/* 通用样式，确保所有图片都能受到影响 */
img {
max-width: 100%; /* 图片最大宽度为其容器的100% */
height: auto; /* 图片高度自动调整，保持宽高比 */
display: block; /* 使图片成为块级元素，以便居中对齐 */
margin: 0 auto; /* 使用margin:auto将图片水平居中 */
}
/* 针对移动端的媒体查询 */
@media only screen and (max-width: 767px) {
img {
max-width: 100%; /* 保持图片在移动端的响应性 */
}
}早期的文本居中方法
.container { text-align: center; }
.container img { display: inline-block; }相对定位法：
.container { position: relative; }
.container img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }Flexbox法：
.container { display: flex; justify-content: center; align-items: center; }Grid布局法：
.container {
display: grid;
place-items: center;
}margin: auto法：
.container {
margin-left: auto;
margin-right: auto;
}
当然,所有的方法都是解决问题,首推我前面的方法,其他的方法更多的只为参考记录.😀
原创文章，作者：超哥，如若转载，请注明出处：https://www.chaoneo.cn/archives/3534.html
如果您觉得超哥分享对您有所帮助的话，记得打赏给我😀