다른 div가 포함 된 div의 가운데 정렬

Question

div 정렬에 문제가 있습니다. 텍스트 정렬 센터, 블록, 인라인 블록을 사용하고 div가 비어있을 때까지 작동합니다. 뭔가를 넣으면 수직 정렬로 바뀝니다. 첨부 된 사진보기. 누군가가 나를 도울 수 있다면 나는 정말로 appriciate 것이다. 감사합니다

.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

당신은 단지 스타일에 block02 ID로 vertical-align 속성을 추가해야합니다. -

 #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 */ 
    }