Question

我正在尝试将一个块元素（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居中。它不起作用。我查看了文档，但它仍然无效。

编辑：我已经尝试过MARGIN-LEFT：AUTO和MARGIN-RIGHT：AUTO。它不起作用。

Answer 1

通常，要将div放在中心，技术是使左右边距都自动，然后给div一个宽度：

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

Answer 2

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

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

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

Answer 3

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

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

这意味着您不必明确设置包含元素的宽度，但缺点是标题文本的宽度为100％，这可能看起来很奇怪。

Answer 4

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

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

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

元素中的中心块元素

4 个答案: