【问题标题】: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: automargin-right: autotext-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 */
        

        【讨论】:

          猜你喜欢
          相关资源
          最近更新 更多
          热门标签