CSS--关于图片＜img＞那些对齐的常用方式

zzuli 山之涯海之角

已于 2023-04-16 10:25:50 修改

阅读量5.6k

点赞数 2

分类专栏： CSS 文章标签： css html 前端

于 2023-04-07 23:46:05 首次发布

本文链接：https://blog.youkuaiyun.com/jian091309/article/details/130020700

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

文章介绍了HTML中的<img>标签，它是一个可替换元素，具有类似inline-block的行为，允许设置宽高。文章详细讲解了如何通过text-align:center;和margin:0auto来实现<img>元素的居中对齐，并提供了示例代码。此外，还提及了其他可能的对齐方法。

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

一.<img>的基本认识

二.替换元素

三.<img>对齐的常用方式

(1)使用text-align: center; 对齐

(2)使用margin: o auto;对齐

(3)其它

一.<img>的基本认识

在mdn中有这样的解释,<img> 是一个可替换元素。它的属性的默认值是 inline，但是它的默认分辨率(默认像素的大小)是由被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。

<img>元素默认值是行内元素,行内元素设置宽高是不生效的,不过,因为<img>元素具有和inline-block(行内块) 一样的属性特点,所以<img>设置宽高是生效的。

二.替换元素

在css中,可以根据是否具有可替换内容,我们可以把元素分为替换元素和非替换元素。

替换元素:可以通过修改某个属性值呈现的内容就可以被替换的元素就称为"替换元素".例如,<img>,<video>,或者表单元素<textarea>和<input>等都是替换元素。

默认值为替换元素的,大多是行内元素,且都具有inline-block(行内块)的属性特点。

三.<img>对齐的常用方式

(1)对于把<img>元素居中,我们可以使用 text-align: center; 属性

不过,关于使用text-align: center; 属性对齐是有方法的。

对于文本对齐,我们可以直接给元素加上text-align: center; 属性即可,不过对于<img>,要想使用text-align: center; 属性对齐,我们得给它加上一个块级的父元素。

例如我们可以使用<div>当作父级,当然我们可以使用行内标签<span>当做父级,再使用 display:block; ,也可以实现图片居中。

以下为方便观察效果，将盒子设置大一些,图片设置小一些,以及设置背景色.

使用<div>当做父级:

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
    <style>
      .pic {
        width: 200px;
        height: 200px;
        background-color: pink;
        text-align: center;
      }
 
      img {
        width: 100px;
        height: 100px;
      }
 
    </style>
  </head>
  <body>
      <div class="pic">
        <img src="./images2/1.jpg" alt="">
      </div>
  </body>
</html>

使用<span>当作父级:

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
    <style>
      .pic {
        display: block;
        width: 200px;
        height: 200px;
        background-color: pink;
        text-align: center;
      }
 
      img {
        width: 100px;
        height: 100px;
      }
 
    </style>
  </head>
  <body>
      <span class="pic">
        <img src="./images2/1.jpg" alt="">
      </span>
  </body>
</html>

结果如图:

(2)使用margin: o auto;实现<img>对齐

而margin:0 auto生效的条件是：

该元素是一个块级元素
元素具有宽度

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
    <style>
     div {
      width: 200px;
      height: 200px;
      background-color: pink;
     }

      img {
        /*img为行内元素，需要将其转换为块级元素 */
        display: block;
        margin: 0 auto;

        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./images2/1.jpg" alt="">
    </div>
  </body>
</html>

结果如图:

(3)其它

当然,有时也可以使用padding等属性实现看起来对齐的效果,或者定位等其它方法,这里就不一

一举例展示了。

😁😁😁😁(●'◡'●)