Question

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

我目前使用以下代码：

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

但是图像左对齐。

我做错了什么？

非常感谢！

Answer 1

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

Answer 2

我会给你两个解决方案

您必须提供父div标签宽度：根据需要，即75％到100％。为img标签写css：margin-left:250px或更多。
为图片position relative; margin-left: 250px或更多添加以下css;

Answer 3

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

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

Answer 4

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

<div id="imageBox">
  <img src="my-image.png" alt="some text" />
</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＆lt; 11并且对IE-10的支持有限。
父容器（在这种情况下为#imgBox）应具有一定的高度和宽度，否则图像将不会居中于其中一个轴。保证金也需要这样做：0自动工作，即没有width（不是百分比），margin: 0 auto属性在CSS中不起作用。

替代方法：

如果你确实想要依赖flexbox，那么它也不会太困难。图片在网页上的性质为inline，但它们仍然可以包含width和height，因此可以使用text-align属性水平居中，即使用上面的示例... < / p>

#imageBox 
{
    text-align: center;
}

然而，它不会垂直居中img。在这种情况下，Vertical-align单独不会垂直居中。为此你可以check this post here.在那里很好地解释。

您还可以使用display: table和display: table-cell并在text-align: center上应用vertical-align: middle和table-cell，将内容放在两个轴上，但我不建议这些除非确实有必要。

Answer 5

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

<img src="path_to_image_copied_from_media_library" alt="an_alt_label" width="150" height="150" class="aligncenter size-thumbnail" />

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

用于在中心对齐图像的CSS

5 个答案:

使用`flexbox`

替代方法：