How to align the text description and image in my portfolio page?

1

http://codepen.io/d1729/pen/PGXRZN

I want to vertically align the text and the image. What am I doing wrong?

2

I found an answer that may help you: http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image

You’ll want to scroll down to this answer: Here are some simple techniques for vertical-align:
One-line vertical-align:middle

He also discuss a bottom alignment…

3

Thanks but I have already tried this. This isn’t working.

4

Not sure if it’s the best solution, but setting the text div’s “line-height” to 5em works for this specific example. Keep in mind that this exact value will NOT work if you change the font size, and it has to be scaled relative to font size and also probably the image’s height.

This can all be done programmatically down the line if you want to, but for now, this works well enough. It may be a more terrible solution than I am aware, but it gets the job done for this particular page.

What it’s doing is literally setting the height of the line the text is on to 500% of whatever the current font-size is (1em == 100%) and centers the text inside that height. At 30px font-size, the line height is 150px and that appears to be the right size to match your image.

1 Like
5

If there is a set height on the photo, perhaps you can make the top padding 25% of the photo size. Then resizing could be done in percentages. As @superking84 says, using em instead of pixels can make this happen.