จัด 3 divs ไว้ตรงกลางภายใต้ 4 div

ฉันมีแท็ก div 4 แท็ก แต่ละแท็กเป็นวันอดีต วันจันทร์ วันอังคาร วันพุธ วันพฤหัสบดี ฯลฯ ฉันมี 4 จัดเรียงโดย float เหลือแต่ละ 200px กว้าง ตอนนี้ฉันมีแท็ก div 3 แท็ก แต่ละแท็กเป็นวัน วันศุกร์ วันเสาร์ วันอาทิตย์ และฉันต้องการให้แท็กนี้อยู่ตรงกลางใต้ 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;        
}

person user2360343    schedule 08.05.2013    source แหล่งที่มา


คำตอบ (1)


คุณกำลังพยายามบรรลุผลสิ่งนี้ หรือไม่ คุณสามารถใช้ inline-block ร่วมกับ text-align:center; เพื่อจัดให้อยู่ตรงกลางได้

person Qiqi Abaziz    schedule 08.05.2013