0

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

这就是我为其中一个块构建 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的垂直对齐之外一切正常......

4

2 回答 2

1

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

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

代码笔示例

于 2013-10-09T20:36:36.523 回答
0

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

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;
}

演示

先试后买

于 2013-10-09T20:30:04.473 回答