CODEWITHSUNDEEP
htmlcss
Benoit Schrijnemakers
Benoit Schrijnemakers

Reputation: 85

Float image next to title and align paragraph

I am fairly new to coding and I can't seem to figure this one out... I've included an image that I am trying to replicate just for practice. I can't figure out how to float the image next to the title AND center that title vertically. Then I also need to align the text underneath the title.

This is how I've built the HTML for one of the blocks

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

And then as far as the CSS goes, I can't figure it out. I am trying to float the image to the left, then clear the float in the p and footer and set a left margin to align it under the title. This works, but then I can't figure out how to vertically center the h1 with the img.

I hope this makes sense. Again, I'm new so I expect most of my stuff to be wrong but I am eager to learn so I am asking!

enter image description here

EDIT: I am not asking anyone to write the code for me. Rather, I want to know if my thinking about the float and margin was right... Everything worked except for the vertical alignment of h1...

Upvotes: 0

Views: 7713

Answers (2)

Paulie_D
Paulie_D

Reputation: 115279

The trick to aligning the image and the h1 is to make theminline-block and then vertical-align:middle. No magic numbers required.

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

Codepen Example

Upvotes: 2

insertusernamehere
insertusernamehere

Reputation: 23590

I'm in a good mood. Here's an example how you can solve this. There are various possibilities. This is just one of them:

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

Demo

Try before buy

Upvotes: 0

Related Questions