html - 在标题旁边 float 图像并对齐段落

Question

我对编码还很陌生，我似乎无法弄清楚这个……我已经包含了一张图像，我只是为了练习而尝试复制它。我不知道如何将图像 float 到标题旁边并使该标题垂直居中。然后我还需要对齐标题下方的文本。

这就是我为其中一个 block 构建 HTML 的方式

<article>

<header>
<img src="#" alt="#" rel="#" />
<h1>This is the header</h1>
</header>

<p>
this is a paragraph full of text that needs to be aligned underneath the title.
</p>

<footer>
<a href="#"> Read more, aligned underneath paragraph</a>
</footer>

</article>

然后就 CSS 而言，我想不通。我试图将图像向左浮动，然后清除 p 和页脚中的 float 并设置左边距以将其对齐到标题下方。这行得通，但后来我不知道如何将 h1 与 img 垂直居中。

我希望这是有道理的。再一次，我是新手，所以我希望我的大部分内容都是错误的，但我渴望学习，所以我要问!

编辑:我没有要求任何人为我编写代码。相反，我想知道我对 float 和边距的想法是否正确......除了 h1 的垂直对齐之外一切正常......

Answer 1

对齐图像和 h1 的技巧是让它们inline-block 然后是 vertical-align:middle。不需要魔数(Magic Number)。

article header img,
article header h1 {
  display:inline-block;
  vertical-align:middle;
}

Codepen Example