將4個div下方的中心對齊3個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

您是否正在嘗試實現這樣的目標 ？ 您可以將inline-block與text-align:center;一起使用text-align:center; 為了使它們居中。