如何在 CSS 中将裁剪后的图像水平居中？

使用 CSS 将图像水平居中

在网页上显示图像时，通常需要将其水平居中对齐。但是，裁剪图像以仅显示一部分可能会使此过程复杂化。

在您提供的 HTML 代码中，您使用 Clip 来裁剪图像，但在将裁剪后的图像居中时遇到困难。以下是您问题的解决方案：

解决方案：

要将裁剪后的图像水平居中，您可以使用 margin-left 和 margin-right CSS 属性。以下是更新后的代码：

<code class="css">.center img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}</code>

为要居中的图像添加 class="center" 属性：

<code class="html"><div id="loading" class="loading-invisible">
  <img  class="loading center lazy" src="/static/imghwm/default1.png" data-src="logo.png" alt="如何在 CSS 中将裁剪后的图像水平居中？" >
</div></code>

说明：

• display: block 属性确保图像占据其父元素的整个宽度。
• margin-left 和 margin-right: auto 属性将左右边距设置为 " auto”，自动将剩余空间均匀分布在图像周围，有效地将其居中。

以上是如何在 CSS 中将裁剪后的图像水平居中？的详细内容。更多信息请关注PHP中文网其他相关文章！