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，使用这个样式类可以让任何元素都水平居中。具体的写法如下：

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

上述代码中，我们不需要再添加任何CSS样式，只需要把图片元素包裹在一个p元素中，并在p元素中添加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，我们可以使用这两个样式类来实现图片的居左或居右。具体的写法如下：

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

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