PHP前端开发

css怎么让图片居中

百变鹏仔 3个月前 (09-19) #CSS
文章标签 图片
将以下代码添加到 css 中即可使图片居中:display: block;margin: 0 auto;

如何使用 CSS 让图片居中

快速解答:

将以下代码添加到您的 CSS 中:

img {  display: block;  margin: 0 auto;}

详细说明:

立即学习“前端免费学习笔记(深入)”;

要使图片在水平方向上居中,必须为其设置 display: block; 属性。此属性使图片在浏览器中以块级元素显示,就像文本段落一样。

接下来,使用 margin: 0 auto; 属性,可以将图片自动水平居中。margin 属性设置图片周围的空间,而 auto 值会自动分配剩余的空间,使其居中。

示例:

以下 HTML 将创建一个水平居中的图片:

@@##@@

以下 CSS 将使图片居中:

img {  display: block;  margin: 0 auto;}

其他选项:

但是,margin: 0 auto; 方法兼容性最强,并且与其他 CSS 属性一起使用时表现良好。