无法让 div 居中答案

【问题标题】：Cannot get div to center无法让 div 居中
【发布时间】：2015-06-06 17:36:03
【问题描述】：

我已经尽一切努力让动态宽度的 div (highlightsContainer) 在其父级中居中。我认为这与这个 div 占据了父容器宽度的 100% 的事实有关，无论我做什么。

我尝试将其设置为 inline-block，但这并不能解决问题。开发工具仍然显示它占据了父容器宽度的 100%。 .highlightsContainer 的子代不会强制它达到这个宽度。

这是我的标记：

<div class="highlightsContainerWrapper">
   <div class="highlightsContainer">
       <a href="#video">
          <div class="highlightEntry">
              <img src="../img/portfolio/lr/lr-highlight-1.png" />
              <div class="highlightLabel">Mobile Site</div>
           </div>
       </a>
       <a href="#email">
           <div class="highlightEntry">
              <img src="../img/portfolio/lr/lr-highlight-2.png" />
              <div class="highlightLabel">Video Gallery</div>
            </div>
        </a>
        <a href="#social">
            <div class="highlightEntry">
               <img src="../img/portfolio/lr/lr-highlight-3.png" />
               <div class="highlightLabel">jQuery Modals</div>
             </div>
        </a>
        <a href="#blog">
             <div class="highlightEntry">
                <img src="../img/portfolio/lr/lr-highlight-4.png" />
                <div class="highlightLabel">SEO</div>
             </div>
        </a>
    </div>
</div>

还有我的 CSS：

.highlightsContainerWrapper {
    float: left;
}

.highlightsContainer {
    display: inline-block;
    margin: 0 auto;
}


.highlightEntry {
    width: 18%;
    margin: 3% 1%;
    float: left;
    position: relative;
    overflow: hidden;
    border: 1px solid #fcfbe7;
}

【问题讨论】：

这里有两个主要概念需要理解； 1.如果一个元素是display：block；它占据了父容器的 100%，并且 2. 如果一个元素是 display inline-block ，那么它就不能再接受 margin: auto;因为它在这方面是内联的。元素的宽度取决于它的子元素而不是它的父元素。因此它相对于其父级的起始位置由 text-align 确定
我有点困惑，但你在找这个吗？ jsfiddle.net/YmM4d/3

标签： html css alignment center

【解决方案1】：

你可以这样做：

.highlightsContainerWrapper {
    float: left;
    width: 100%;
    text-align: center;
}

适用于动态生成的内容。您不必在 .highlightsContainer 上设置宽度

Working jsFiddle demo

【讨论】：

【解决方案2】：

要添加到前面的评论，如果您不希望每次都将宽度设为 100%，这也可以正常工作。

.highlightsContainerWrapper {
   float: left;
   text-align:center;
}

然后你可以随意设置宽度。

希望能帮助您将 div 居中

【讨论】：

查看我刚刚发布的链接。我删除了width:100%，它不再居中。
哦，是的，我现在明白了。如果您更改宽度，则不会考虑他输入的动态内容。感谢您的更正。我现在也试过了，发现你是对的。