0

私はコーディングにかなり慣れていないので、これを理解できないようです...練習のために複製しようとしている画像を含めました。タイトルの横に画像を浮かせ、そのタイトルを垂直方向に中央に配置する方法がわかりません。次に、タイトルの下にテキストを揃える必要もあります。

これは、ブロックの 1 つの 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で垂直方向に中央に配置する方法がわかりません。

これが理にかなっていることを願っています。繰り返しますが、私は新しいので、ほとんどのものが間違っていると思いますが、学びたいと思っているので質問しています!

ここに画像の説明を入力

編集：私は誰にも私のためにコードを書くように頼んでいません。むしろ、float と margin についての私の考えが正しかったかどうか知りたいです... h1 の垂直方向の配置を除いてすべてが機能しました...

4

2 に答える 2

0

機嫌がいいです。これを解決する方法の例を次に示します。さまざまな可能性があります。これはそのうちの 1 つです。

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 に答える