sejajarkan 3 div di tengah di bawah 4 div

Saya memiliki 4 tag div yang masing-masing adalah hari mantan. Senin, Selasa, Rabu, Kamis, dll.. Saya memiliki 4 yang disejajarkan dengan float kiri masing-masing lebar 200px. Sekarang saya memiliki 3 tag div yang masing-masing adalah hari juga Jumat Sabtu Minggu, dan saya ingin memusatkannya di bawah 4 tag di atas.

<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>

gaya

#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 sumber


Jawaban (1)


Apakah Anda mencoba mencapai sesuatu seperti ini? Anda dapat menggunakan inline-block bersama dengan text-align:center; untuk memusatkannya.

person Qiqi Abaziz    schedule 08.05.2013