html - 在 bootstrap 中对齐两个 div

Question

我有以下输出:

蓝色圆圈在一个 div 中，文本在另一个中。我不明白为什么第一个 div 在顶部而第二个似乎没有相互对齐。

下面是代码:

CSS

#circles {
    background: #4A90E2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
     display: inline-block;
     position: relative;
     color: white;
     font-size: 23px;
}

HTML

<div class="row" style="background-color: rgba(140,  140,  140, 0.33);"> 

                <div class="col-sm-4 col-sm-offset-5">
                     <div class="row" style="padding-top: 20px;">
                         <div class="col-sm-1">
                            <div id="circles"> 
                                1 
                            </div>
                         </div>
                         <div class="col-sm-11 pull-right">
                            <h2 style="vertical-align:top;">Maak je pakje klaar</h2>
                         </div>
                     </div>
                </div>

            </div> 

我尝试了 vertical-align 但没有结果。

Answer 1

Bootstrap 在元素上有一些默认的 css 值，例如标题标签有

h1, .h1, h2, .h2, h3, .h3 {
    margin-bottom: 10px;
    margin-top: 20px;
}

您需要根据需要将其删除或管理。

在这里你可以使用:

h2 {
    margin: 0;
}

但更好的选择是你应该 customize Bootstrap使用前。