元素中的中心块元素答案

【问题标题】：Center block element in element元素中的中心块元素
【发布时间】：2010-11-15 12:06:25
【问题描述】：

我正在尝试使块元素（WordPress 标题框，包括图像）居中，但它不起作用。我试过了：

.imagecenter {
   margin-left: auto;
   margin-right: auto;
   display: block;
}

但它只是行不通。我也试过margin-left: auto; margin-right: auto;，但这也行不通。有什么我做错了吗？这就是 W3C 文档说我应该做的。

在 HTML 中看起来像这样（澄清）：

<div id="content">
........post here......
<div class="wpcaption imagecenter" style="width:225px">
<img src="blah" />
Blah.
</div>
.........post here......
</div>

我无法控制元素的宽度。它由用户设置。用户希望 div 居中。它不工作。我查看了文档，但它仍然无法正常工作。

编辑：我已经尝试过左边距：自动和右边距：自动。它不起作用。

【问题讨论】：

标签： html css wordpress

【解决方案1】：

给它一个小于其父级的宽度。

.parent    { }
.imgCenter { width:320px!important; margin:auto; }

<div class="parent">
  <img src="foobar.jpg" class="imgCenter" />
</div>

【讨论】：

不知道孩子的宽度；它是内联设置的。这是一个 WordPress 主题。应该已经定义了父级，因为它是帖子内容所在的容器。
布兰登，你必须给你想要居中的项目一个明确的宽度。这就是你的 margin:auto 如何计算出边距应该是多少。
我是。您提供的所有解决方案我已经知道。宽度在 html 中内联（如
因为它会改变）。
在你的 CSS 中添加 !important。
如果200px小于父宽度，没关系。

【解决方案2】：

一般来说，要将 div 定位在中心，技术是让左右边距都自动，然后给 div 一个宽度：

.centerDiv
{
    margin-left:auto;
    margin-right:auto;
    width: XXX px;
}

【讨论】：

【解决方案3】：

更简单的解决方案可能是在包含元素的所有子元素上设置margin-left: auto、margin-right: auto 和text-align: center（用于标题文本）：

.imagecenter *{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

这意味着您不必显式设置包含元素的宽度，但缺点是您的标题文本将具有 100% 的宽度，这可能看起来很奇怪。

【讨论】：

【解决方案4】：

我知道这是一个老问题，但对于那些在 Google 上找到此问题的人，我找到了另一个答案：

只需将这些属性赋予包装元素，内容就会居中对齐。

width: 1024px; 
margin-left: auto;
/* I have used 1024px since I set the minimum resolution requirements for my website as 1024 x 768 */

【讨论】：