Question

我想知道如何在CSS中居中4 div。我希望将它们布置成正方形，即顶部两个，底部两个。目前，它们全都位于左侧，无论我尝试什么，我都无法让它们居中。

HTML：

<div class="Main">

    <div class="news-panels">
       <div class="news-panels-inner"></div>
          <div class="news-panel1">
             <div class="news-panel-inner">
                <a class="news-panel-link">
                   <img class="news-panel-image" width="235" height="235" src="./images/christmas_news.jpg" alt="Christmas News">
                   <div class="news-panel-header">
                      <hr>
                      <h3>Keep up to date with all Chistmas news!</h3>
                   </div>
                </a>
             </div>

          </div>
</div>

CSS：

 .Main {
       text-align: center;
       position: relative;
    }

    .news-panel1 {
            background: #747171;
            width: 300px;
            height: 300px;
            margin: 10px;
            display: inline-block;
            float: left;
            border-radius: 15px;    
        }

如果有人能告诉我如何解决这个问题，那会让我的日子好一百万倍，那就让我发疯了。

Answer 1

您不能通过使它们居中来使它们居中。这样会将元素从文档流中移出，并迫使它们向右或向左移动。

您可以这样做（快速又脏）：

.Main {
  margin: auto;
  width: 650px;
  height: 650px;
}

.news-panel {
  background-color: #747171;
  border-radius: 15px;
  display: inline-block;
  width: 300px;
  height: 300px;
  margin: 10px;
}

或者，您可以使用更现代的Flexbox方法。

Answer 2

您可以通过删除divs来居中float:left;

.news-panel1 {
    background: #747171;
    width: 300px;
    height: 300px;
    margin: 10px;
    display: inline-block;
    /* float: left; */
    border-radius: 15px;
}

以方形布局CSS居中4个div

2 个答案: