Question

我已经尝试了一切来获得动态宽度div（highlightContainer）以在其父级中居中。我认为它与这个div占据父容器宽度的100％这一事实有关，无论我做什么。

我曾尝试将其设置为内联块，但这并不能解决问题。开发工具仍将其显示为占用父容器宽度的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;
}

Answer 1

您可以这样做：

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

适用于动态生成的内容。您不必在.highlightsContainer

上设置宽度

Working jsFiddle demo

Answer 2

要添加到上一个注释，这也可以正常工作，而不必每次都有100％的宽度，如果你不希望它。

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

然后你可以根据自己的意愿制作宽度。

希望帮助你将div放在中心

不能让div到中心

2 个答案: