css - 将 3 个 div 在 4 个 div 下居中对齐

Question

我有 4 个 div 标签，每个标签都是一天。 星期一、星期二、星期三、星期四等。我有 4 个由 float 对齐，每个 200px 宽。现在我有 3 个 div 标签，每个标签都是一天 星期五星期六星期日，我想把它放在上面 4 个下面的中心。

<div id= "top-four-days">   
    <br />
    <div class= "monday">
       <h2>Monday</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
       <h2>Evening</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
     </div>
     <div class= "tuesday">
       <h2>Tuesday</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
       <h2>Evening</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
     </div>
     <div class= "wednesday">
       <h2>Wednesday</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
       <h2>Evening</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
     </div>
     <div class= "thursday">
       <h2>Thursday</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
       <h2>Evening</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
    </div>
 </div>
 <div id= "bottome-three-days">   
    <br />
    <div class= "friday">
       <h2>Friday</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
       <h2>Evening</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
    </div>
    <div class= "saturday">
       <h2>Saturday</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
       <h2>Evening</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
    </div>
    <div class= "sunday">
       <h2>Sunday</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
       <h2>Evening</h2>
       <br />
       <h3>Date:</h3>
       <h3>Time:</h3>
       <h3>Location:</h3>
    </div>
 </div>

风格

#top-four-days {
    width: 800px;       
    }
#bottom-three-days {
    width: 800px;
    background-color: #999;
    }

.monday {
    width: 200px;
    height: 300px;
    background-color: purple; 
    float: left;        
}

.tuesday {
    width: 200px;
    height: 300px;
    background-color: #F00;
    float: left;    
}

.wednesday {
    width: 200px;
    height: 300px;
    background-color: blue; 
    float: left;        
}

.thursday {
    width: 200px;
    height: 300px;
    background-color: yellow;
    float: left;        
}

.friday {
    width: 200px;
    height: 300px;
    background-color: yellow;
    float: left;        
}
.saturday {
    width: 200px;
    height: 300px;
    background-color: yellow;
    float: left;        
}
.sunday {
    width: 200px;
    height: 300px;
    background-color: yellow;
    float: left;        
}

Answer 1

您是否正在尝试实现类似 this 的目标？ ？您可以将 inline-block 与 text-align:center; 一起使用，以使它们居中。