Question

我在自适应主页上遇到问题。当页面宽度小于1024px时，我希望两个内容小部件彼此低于水平对齐。我定义了它们的宽度并尝试将它们置于margin: 0 auto的中心位置，但它们位于左侧。

这是链接：http://readyforsolutions.be/wordpress/

这是我的HTML：

<div class="home-left">
    <h1 class="widgettitle">Title</h1>
    <p>Text</p>
    <div class="homebuttonbox"><a class="homebutton"  href="http://readyforsolutions.be/wordpress/logistieke-problemen-quick-scan/">Doe de Quick     Scan</a></div>
</div>

<div class="home-right">
    <h1 class="widgettitle">Title</h1>
    <p>Text</p>
    <div class="homebuttonbox"><a class="homebutton" href="http://readyforsolutions.be/wordpress/logistieke-problemen-quick-scan/">Doe de Quick Scan</a></div>
</div>

这是我的CSS：

.entry-content {
    width: 100%;
}

.home-left {
    width: 100%;
    float: none;
    display: block;
    margin: 0 auto;
}

.home-right {
    width: 100%;
    float: none;
    display: block;
    margin: 0 auto;
    padding-top: 120px;
}

感谢任何帮助！

谢谢，斯特凡

Answer 1

修改容器DIV标签的显示和边距参数可能会起到作用：

<强> HTML：

<DIV class="entry-content">

<div class="home-left">
  <h1 class="widgettitle">Title #1</h1>
  <p>Text</p>
  <div class="homebuttonbox">Content Box #1</div>
</div>

<div class="home-right">
  <h1 class="widgettitle">Title #2</h1>
  <p>Text</p>
  <div class="homebuttonbox">Content Box #2</div>
</div>

</DIV>

<强> CSS：

.entry-content {
     margin-left: auto;
     margin-right: auto;
     border: 5px black solid;
     text-align: center; }

.home-left {
     float: none;
     margin: 0 auto;
     border: 1px red solid;
     display: inline-block;
     text-align: left; 
}

.home-right {
     float: none;
     margin-left: 0px;
     border: 1px blue solid;
     display: inline-block;
     text-align: left;
}

其他资源： CSS Centering

实施例： CodePen Example

div中的2个小部件

1 个答案: