如何将标题与图像对齐（线高问题）

Question

我有一个2列布局，其中左列是标题，右列是图像。我希望标题和图像在顶部对齐，如下所示：

现在我通过设置h1 { line-height: 1em; }来实现这一目标。但是，如果行高更大，并且标题包含更多行，我也希望它能够工作，就像在此代码示例中一样：

＆＃13;

＆＃13;

body {
max-width: 400px;
}

div {
  float: left;
  width: 50%;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 2em;
}

img {
  width: 100%;
}

＆＃13;

<div>
  <h1>Hello world!
  <br>Foo Bar Baz</h1>
</div>
<div>
  <img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>

＆＃13;

＆＃13;

＆＃13;

我不想使用负边距，因为左栏将在以后填充CMS内容。我无法控制在那里显示什么元素（h1-h6，p等）以及该元素具有的行高。

Answer 1

您始终可以使用旧的vertical-align属性。尽管如此，这一直是一个棘手的财产 在您的情况下，例如，我必须同时生成两个div display属性inline-block，因为您需要内联元素，以便您可以垂直对齐它们。
此外，我不得不将一个div的结束标记放在下一个的开头旁边，因为显示它们inline会将代码中的新行渲染为空格，从而产生第二个{{1}落到一个新的行。

div

body {
max-width: 400px;
}

div {
  width: 50%;
  display:inline-block;
  vertical-align:middle;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 2em;
}

img {
  width: 100%;
}

Answer 2

这是在CSS中使用flexbox布局的最佳时机。

使用flexbox，您可以非常轻松地对齐内容，而无需设置任何特定的高度 - 因为您可以让元素与其兄弟姐妹的身高相同。

我已经创建了一个快速演示，对您的代码进行了一些细微的更改，我相信它会创建您希望的结果：

＆＃13;

＆＃13;

body {
max-width: 400px;
}

h1 {
  margin: 0;
  padding: 0;
  line-height: 2em;
}

img {
  width: 50%;
}
.flex-container {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

＆＃13;

<div class="flex-container">
  <h1>Hello world!
  <br>Foo Bar Baz</h1>
  <img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>
<hr>
<div class="flex-container">
  <h2>Hello world!
  <br>Foo Bar Baz Longer example with h2</h2>
  <img src="https://media1.tenor.com/images/1c765c0d5963c84864bece62355713e0/tenor.gif?itemid=8240085">
</div>

＆＃13;

＆＃13;

＆＃13;

有关flexbox的更多信息，请访问：https://css-tricks.com/snippets/css/a-guide-to-flexbox/