Html 将两个内联块元素垂直居中

我有以下代码：

.logo h1{
显示：内联块；
字体大小：粗体；
字体系列：arial，无衬线；
颜色：#0066CC；
保证金：0px 20px 0px 0px；
}
.标志h2{
字号：1.5em；
保证金：0px 0px 0px 0px；
字体大小：粗体；
字体系列：arial，无衬线；
颜色：#C61476；
显示：内联块；
}

迈洛戈
我吸引人的口号

给定两个元素都设置为

显示：内联块因此被归类为
内联
您可以使用
垂直对齐：中间以使其垂直居中

垂直对齐

垂直对齐CSS属性指定内联或表格单元格框的垂直对齐方式

垂直对齐（）


.logo h1{
显示：内联块；
字体大小：粗体；
字体系列：arial，无衬线；
颜色：#0066CC；
保证金：0px 20px 0px 0px；
垂直对齐：中间对齐；
}
.标志h2{
字号：1.5em；
保证金：0px 0px 0px 0px；
字体大小：粗体；
字体系列：arial，无衬线；
颜色：#C61476；
显示：内联块；
垂直对齐：中间对齐；
}

迈洛戈
我吸引人的口号
以下是您的解决方案：

html:


迈洛戈
我吸引人的口号
为什么必须将两者都设置为
垂直对齐：中间？我只是用
.logo h2
试了一下，但没用！然而，你的工作！默认情况下，
垂直对齐
设置为
基线
。不应用
垂直对齐：中间至
。徽标h1
表示
基线
与MyLogo上M、L和os的底部对齐。由于我的标语与
基线垂直对齐（更多信息请参见mozilla文档），它出现在明显错误的位置。设置<代码>垂直对齐：中间
上的code>将
基线
自身移向文本中间。
.logo h1 {
        display: table-cell;
        font-weight: bold;
        font-family: arial, sans-serif;
        color: #0066CC;
        margin: 0px 20px 0px 0px;
        vertical-align: middle;
    }

    .logo h2 {
        font-size: 1.5em;
        font-weight: bold;
        font-family: arial, sans-serif;
        color: #C61476;
        display: table-cell;
        vertical-align: middle;
    }

    .logo{
        display: table;
    }

<div class="logo">
    <h1>MyLogo</h1>
    <h2>My Catchy Slogan</h2>
</div><!-- .logo -->