用于在中心对齐图像的 CSS

Posted 2023-03-06

【中文标题】用于在中心对齐图像的 CSS

【英文标题】：CSS for aligning image in the center

【发布时间】：2016-01-28 00:44:42

【问题描述】：

我在我的 WordPress 博客的小部件中放置了一张图片。我希望图像居中，因为它比它所在的侧边栏小。

我目前使用以下代码：

<img style="display: block; margin-left: auto; margin-right: auto; padding-bottom: 10px; width: 150px; height: 155px;" src="path">

但图像左对齐。

我做错了什么？

非常感谢！

【问题讨论】：

It is probably something else that is causing the issue

是否有text-align:left 或float:left 可能对其产生影响

我不使用 WordPress，但请检查图像是否从之前定义的另一个规则中继承 float:left。

发布您遇到的问题的网页链接。

这个（非）工作示例将不胜感激，因为 Ionut 提到，css 本身应该可以工作，正如 potashin 的小提琴所证明的那样。可能会干扰的是继承的样式或全局 css，如果我们有一个工作示例，这两者都很容易检查

【参考方案1】：

尝试margin: 0 auto 而不是单独声明它们。您也可以尝试将 text-align: center 添加到它的容器或父 div 中

【参考方案2】：

我会给你两个解决方案

你必须给父 div 标签宽度：根据需要，即 75% 到 100%。 为img标签写css：margin-left:250px或更多。

在css下方添加图片position relative; margin-left: 250px或更多；

祝你好运

【参考方案3】：

在包含图像的 div 上使用 text-align: center;：

.siteorigin-widget-tinymce.textwidget
  text-align: center;

【参考方案4】：

因为每个人都使用类似的东西添加了答案。我决定与大家分享这个。您可以将此解决方案用于x (horizontal) 和y (vertical) 轴的中心图像因为这就是问题标题所说的。这在flexbox 上中继。

<div id="imageBox">
  <img src="my-image.png"  />
</div>

使用flexbox

#imageBox

    display:flex;
    flex-direction:column;
    justify-content:center; 
    width: 400px;
    height: 400px;


#imageBox img

    margin: 0 auto;  /* this is where magic will happen!! */

这是上述方法的DEMO。

如果您想仅水平居中使用flexbox，只需省略img 的样式并设置以下内容。

#imageBox

    display: flex;
    flex-direction: row;  /* changed from column to row  */
    justify-content: center;

请注意，我已将 flex-direction 属性从 column 更改为默认设置 row。如果您不指定它仍然可以工作。将其设置为column 将使其垂直居中。

在使用 flexbox 时应牢记一些事项。

flexbox is not supported in older IE versions 即 IE 父容器（在这种情况下为#imgBox）应该有一定的高度和宽度，否则图像将不会在某个轴上居中。这也是 margin: 0 auto 工作所必需的，即没有width（不是百分比），margin: 0 auto 属性在CSS 中不起作用。

替代方法：

如果您确实想依赖 flexbox，那么这也不是什么难事。图片在网页上本质上是inline，但它们仍然可以有width 和height，因此它们可以使用text-align 属性水平居中，即使用上面的示例......

#imageBox 

    text-align: center;

但是它不会垂直居中img。在这种情况下，单独的Vertical-align 不会使图像垂直居中。为此，您可以check this post here. 那里很好地解释了。

您也可以使用display: table 和display: table-cell 并在table-cell 上应用text-align: center 和vertical-align: middle 以使内容在两个轴上居中，但除非确实有必要，否则我不推荐这些。

【参考方案5】：

假设您的子主题中有正确的 WP 特定 CSS，试试这个：

<img src="path_to_image_copied_from_media_library"    class="aligncenter size-thumbnail" />

size-thumbnail 允许您为注册的缩略图大小的图像使用默认样式。如果您开始为单个图像添加 CSS 规则，您往往会破坏整个网站的样式一致性。