Question

我有一个居中div的问题。我正在使用文本对齐中心，块，内联块，它一直工作，直到div为空。我把它放在垂直对齐后会改变。见附图。如果有人可以帮我解决这个问题，我会非常感激。感谢

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

空div：empty div image 完全div：fully div image

Answer 1

您只需要将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 */
    }

Answer 2

尝试使用这个技巧：

#section01 {
  margin: 0 auto;
}

居中包含其他div的div

2 个答案: