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

如何使用 CSS 水平对齐图像

当尝试将图像水平居中时，CSS 提供了有效的解决方案。在此问题中，用户使用 HTML 显示图像并使用 CSS 裁剪图像。但是，他们在将裁剪后的图像居中时遇到困难。

要解决此问题，可以应用以下 CSS 规则：

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

通过将 center 类添加到图像元素，它可以可以水平居中：

<code class="html">&lt;div id=&quot;loading&quot; class=&quot;loading-invisible&quot;&gt;  
    &lt;img class=&quot;loading center&quot; src=&quot;logo.png&quot;&gt;
&lt;/div&gt;</code>

这些 CSS 规则通过将图像设置为块元素显示并自动调整左右边距来达到所需的效果。这会导致图像在其容器内居中。

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