0

我已经尝试了一切以使动态宽度的 div (highlightsContainer) 在其父级中居中。我认为这与这个 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;
}
4

2 回答 2

1

你可以这样做：

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

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

工作 jsFiddle 演示

于 2013-09-29T04:02:15.647 回答
0

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

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

然后，您可以将宽度设置为任何您想要的宽度。

希望能帮助您将 div 居中

于 2013-09-29T04:16:34.083 回答