在标题旁边浮动图像并对齐段落答案

【问题标题】：Float image next to title and align paragraph在标题旁边浮动图像并对齐段落
【发布时间】：2013-10-10 23:46:34
【问题描述】：

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

这就是我为其中一个块构建 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 和页脚中的浮动并设置左边距以使其在标题下对齐。这行得通，但是我不知道如何将 h1 与 img 垂直居中。

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

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

【问题讨论】：

欢迎来到 SO。您需要向我们展示您的尝试，而不是要求我们为您编写代码。如果您是 CSS 新手，请阅读并学习基础知识，然后尝试一下。
您不应在<article> 中使用<header> 或<footer>。它们应该与文章元素处于同一级别。
<article> 中的 <header> 和 <footer> 是完全语义化的。诚然，它们经常被滥用，因为没有理由不能使用它们。

标签： html css

【解决方案1】：

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

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

Codepen Example

【讨论】：

【解决方案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

【讨论】：