html - 垂直居中两个内联 block 元素

Question

我有以下代码:

.logo h1 {
  display: inline-block;
  font-weight: bold;
  font-family: arial, sans-serif;
  color: #0066CC;
  margin: 0px 20px 0px 0px;
}
.logo h2 {
  font-size: 1.5em;
  margin: 0px 0px 0px 0px;
  font-weight: bold;
  font-family: arial, sans-serif;
  color: #C61476;
  display: inline-block;
}

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

这给了我这个:

有人能告诉我如何让标语位与 MyLogo 文本的中心对齐，无论 <div class="logo"> 的高度是多少？更改为？

我尝试了很多通过 Google 找到的解决方案，但似乎都没有用。

Answer 1

鉴于这两个元素都设置为 display: inline-block; 因此被归类为 inline 你可以使用 vertical-align: middle; 将它们垂直居中。

vertical-align
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

垂直对齐 ( https://developer.mozilla.org/en/docs/Web/CSS/vertical-align)

.logo h1 {
  display: inline-block;
  font-weight: bold;
  font-family: arial, sans-serif;
  color: #0066CC;
  margin: 0px 20px 0px 0px;
  vertical-align: middle;
}
.logo h2 {
  font-size: 1.5em;
  margin: 0px 0px 0px 0px;
  font-weight: bold;
  font-family: arial, sans-serif;
  color: #C61476;
  display: inline-block;
  vertical-align: middle;
}

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