Question

我在div中有一个无法居中的div。即使在margin: 0 auto并设置了明确的宽度后，我似乎无法弄清楚问题是什么。想知道它有什么问题以及如何解决这个问题。提前谢谢！

 <div class="services-container">
        <h1 class="header-title banner">Services</h1>
        <div class="service-items">
            <div class="service-item">
                <span class="icon-box icon"></span><h2 class="service-title">Moving</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
                <a href="#">Learn More</a>
            </div>
            <div class="service-item">
                 <span class="icon-box icon"></span><h2 class="service-title">Delivery</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
                <a href="#">Learn More</a>
            </div>    
            <div class="service-item">
                <span class="icon-box icon"></span><h2 class="service-title">Accounting</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
                <a href="#">Learn More</a>
            </div>    
            <div class="service-item">
                 <span class="icon-box icon"></span><h2 class="service-title">IT Services</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquam laoreet nisl sed placerat. Cum sociis natoque penatibus et magnis dits mcorper semper nibh ac auctor. </p>
                <a href="#">Learn More</a>
            </div>
        </div>  
    </div>

CSS：

    div.services-container {
    margin-top: 1em;
    overflow:hidden;
    max-width: 100%;
    margin: 0 auto;
}

div.service-items {
    max-width: 1280px;
    overflow:hidden;
    margin: 0 auto;
}

div.service-item {
    border:1px solid black;
    width:45%;
    padding: 1em;
    margin:0 auto;
    float:left;
    text-align: center;
}

Answer 1

如果你的意思是服务项div，那么它就是float：left导致问题 - 删除它并将它集中对齐。

Answer 2

从float:left样式

中删除div.service-item

演示：http://jsfiddle.net/lotusgodkk/GCu2D/191/

CSS：

div.services-container {
      margin-top: 1em;
      overflow:hidden;
      max-width: 100%;
      margin: 0 auto;
  }
  div.service-items {
      max-width: 1280px;
      overflow:hidden;
      margin: 0 auto;
  }
  div.service-item {
      border:1px solid black;
      width:45%;
      padding: 1em;
      margin:0 auto;      
      text-align: center;
  }

Answer 3

使用display:inline-block;代替float:left;

<强> jsBin demo

div.service-items {
    background:#eee;
    max-width: 1280px;
    overflow:hidden;
    margin: 0 auto;
    text-align: center; /* ADD */
}

div.service-item {
    border:1px solid black;
    width:45%;
    padding: 1em;
    margin:0 auto;
    /*float:left;*/       /* REMOVE */
    display:inline-block; /* ADD */
    /*text-align: center; */ /* REMOVE FROM HERE */
}

无法居中div

3 个答案: