Html 无法将div居中

我在一个无法居中的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> 

---

如果您指的是服务项目divs，那么是float:left导致了问题-删除它，它将居中对齐。

从

div.service-item

样式中删除

float:left

演示：

CSS:

---

使用

显示：内联块而不是
浮动：左


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 */
}

宽度：45%没有要应用的参考。.service项中未设置宽度，因此它们使用所有可用空间：）
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;
  }

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 */
}