выровнять 3 divs в центре под 4 divs

Question

У меня есть 4 тега div каждый день - день ex. Понедельник, вторник, среда, четверг, и т.д.. У меня есть 4 выровненных поплавком, каждый из которых равен 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;, чтобы центрировать их.