用于将图像对齐到中心的CSS

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

我目前使用以下代码：

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

但图像是左对齐的

我做错了什么

---

非常感谢

尝试

margin:0 auto

而不是单独声明它们。您还可以尝试将

text align:center

添加到它的容器或父div

我将给你两个解决方案

您必须提供父div标记宽度：根据需要，即75%到100%。 为img标记编写css：

左边距：250px

或更多

为图像

相对位置添加以下css；左边距：250px

或更大

---

祝你好运

使用

文本对齐：居中在包含图像的div上：


.siteorigin-widget-tinymce.textwidget{
文本对齐：居中；
}
因为每个人都使用类似的方法添加了答案。我决定和大家分享这个。您可以将此解决方案用于
x（水平）
和
y（垂直）
轴的中心图像，因为这是问题标题所说的。这是一个继电器

以下是上述方法的基本原理

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

请注意，我已将
flex direction
属性从
column
更改为
row
，这是默认设置。如果不指定，它仍然有效。将其设置为
列将使其垂直居中

在使用flexbox时，有一些事情需要记住。


即IE<11，对IE-10的支持有限
父容器（
#在本例中为imgBox
）应具有一定的高度和宽度，否则图像将不会位于其中一个轴的中心。这也是margin:0 auto工作所必需的，也就是说，如果没有
宽度
（不是百分比），那么
margin:0 auto
属性将无法在
CSS
中工作

备选办法：
如果你真的想依赖flexbox，那么它也不难。图像本质上是网页上的
内联
，但它们仍然可以具有
宽度
和
高度
，因此可以使用
文本对齐
属性水平居中，即使用上述示例

#imageBox 
{
    text-align: center;
}

但是，它不会使
img
垂直居中<在这种情况下，仅代码>垂直对齐
不会使图像垂直居中。你可以在这里很好地解释这一点

您还可以使用
display:table
和
display:table cell
并在
table cell
上应用
text align:center
和
vertical align:middle
将内容居中放置在两个轴上，但我不推荐使用这些，除非确实必要。
假设您的页面中有正确的WP特定CSS子主题，请尝试以下操作：

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



“大小缩略图”允许您为注册的拇指指甲大小的图像使用默认样式。如果你开始为单个图像添加CSS规则，你会破坏整个网站风格的一致性。
是否有可能影响itI的
text align:left
或
float:left
，但是，请检查图像是否继承了先前定义的另一个规则的
float:left
。发布一个链接到您遇到的问题的网页。Ionut提到，（非）工作示例将非常感谢，css本身应该可以工作，如potashin的小提琴所示。可能会产生干扰的是继承样式或全局css，如果我们有一个工作示例，这两种样式都很容易检查
#imageBox
{
    display: flex;
    flex-direction: row;  /* changed from column to row  */
    justify-content: center;
}

#imageBox 
{
    text-align: center;
}

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