Css设置img属性让图片水平居中/居左/居右的写法

请看下面的完整攻略。

一、文本水平居中

1.1 text-align属性

我们可以使用CSS3中的text-align属性来对图片进行文本水平居中的操作。具体的写法如下：

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

上述代码中，我们对img元素添加了display: block样式，使其成为块级元素；然后通过设置margin的值为0 auto，可以让图片元素的左右外边距都自动填充，从而实现了水平居中的效果。

1.2 text-center样式类

为了方便，Bootstrap框架提供了一个内置样式类text-center，使用这个样式类可以让任何元素都水平居中。具体的写法如下：

<div class="text-center">
  <img src="https://example.com/example.png" alt="example image">
</div>

上述代码中，我们不需要再添加任何CSS样式，只需要把图片元素包裹在一个div元素中，并在div元素中添加text-center样式类即可。

二、图片居左/居右

2.1 float属性

我们可以使用CSS中的float属性来实现图片的居左或居右。具体的写法如下：

/* 居左 */
img {
  float: left;
}

/* 居右 */
img {
  float: right;
}

上述代码中，我们使用了float属性来将图片元素向左或向右浮动，从而实现了图片的靠左或靠右的效果。

2.2 text-left和text-right样式类

同样地，Bootstrap框架也提供了内置样式类text-left和text-right，我们可以使用这两个样式类来实现图片的居左或居右。具体的写法如下：

<!-- 居左 -->
<div class="text-left">
  <img src="https://example.com/example.png" alt="example image">
</div>

<!-- 居右 -->
<div class="text-right">
  <img src="https://example.com/example.png" alt="example image">
</div>

上述代码中，我们只需要在div元素中添加text-left或text-right样式类即可。这样就可以实现图片的居左或居右的效果。

以上就是“Css设置img属性让图片水平居中/居左/居右的写法”的完整攻略。