标题旁边的浮动图像和对齐段落

Question

我对编码很新，我似乎无法想出这个...我已经包含了一个我试图复制的图像只是为了练习。我无法弄清楚如何将图像浮动到标题旁边并将标题垂直居中。然后我还需要对齐标题下面的文本。

这就是我为其中一个块

构建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和页脚中的浮动并设置左边距以在标题下对齐它。这有效，但后来我无法弄清楚如何用img垂直居中h1。

我希望这是有道理的。再一次，我是新人，所以我希望我的大部分内容都是错的，但我很想学习，所以我在问！

编辑：我不是要求任何人为我编写代码。相反，我想知道我对浮动和边距的思考是否正确......除了h1的垂直对齐外，一切都有效...

Answer 1

对齐图像和h1的技巧是使它们inline-block然后vertical-align:middle。不需要魔法数字。

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

Codepen Example

Answer 2

我心情很好。这是一个如何解决这个问题的例子。有各种可能性。这只是其中之一：

<强> CSS

article {
    position: relative;
    float: left;
    width: 200px;
    padding: 0 0 0 60px;
} 

article:before {
    content: url(http://placehold.it/50x50);
    position: absolute;
    top: 0;
    left: 0px;
    width: 50px;
    height: 50px;
}

<强>演示

Try before buy