Центрирующие divs, которые содержат другие divs

Question

У меня проблема с центрирующими div. Я использую text-align center, block, inline-block и работает до тех пор, пока divs не будут пустыми. После того, как я поместил что-то в вертикальное выравнивание, будет изменено. См. Прикрепленные фотографии. Я действительно буду оценивать, если кто-то может мне помочь. Благодаря

.white-title { 
font-family: 'SourceSansPro-Bold'; 
font-size: 20px; 
color: #ff4f00; 
}  

#section01 { 
text-align: center; 
display: block; 
margin-bottom: 30px; 
} 

#block01 { 
background-image: url('images/01_block.png'); 
display: inline-block; 
margin-top: 30px; 
margin-left: 29px; 
margin-right: 29px; 
height: 274px; 
width: 480px; 
} 

#block02 { 
display: inline-block; 
margin-top: 30px; 
margin-left: 29px; 
margin-right: 29px; 
height: 274px; 
width: 480px; 
}  

<div id="section01"> 
    <div id="block01"> 
     <div class="white-title" style="text-align: center;">ERRE KERESTÜNK 2014</div> 
    </div> 
    <div id="block02"> 
     <iframe src="//www.youtube.com/embed/NUupD4a0Yx4?rel=0&amp%3Bcontrols=0..." width="480" height="270" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
    </div> 
</div> 

Пустой ДИВ: empty div image Полностью ДИВ: fully div image

Answer 1

Попробуйте использовать этот трюк:

#section01 { 
    margin: 0 auto; 
} 

Answer 2

Вам просто нужно добавить vertical-align свойство вашего block02 Id в стиле. как указано ниже: -

 #block02 
     { 
     display: inline-block; 
     margin-top: 30px; 
     margin-left: 29px; 
     margin-right: 29px; 
     height: 274px; 
     width: 480px; 
     vertical-align: top; /* this needs to be added */ 
    }