The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertically aligning a headline in a responsively cropped image

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #195510

    There are a few things I’ve finally combatted regarding cropping an image using CSS. However, now I have to align a headline within the image vertically.

    So I thought perhaps position: absolute, top: 50% would do just this, but responsively it’s not aligned in the middle at all.

    I’ve tried table-cell but that didn’t work at all.

    Here is a CodePen of my problem.

    Here is a working site of the goal I want to accomplish.

    1) The image has to stay cropped 200px no matter what dimensions.

    2) The headline needs to stay in the middle no matter what dimensions.

    I’m really stumped on this, and I hope I explained myself well. I apologize if I was all over the place in my explanation.


    Oh wow! That’s great, thank you.

    My only issue though is it seems that adding :before to it added some wierd padding to the left of the page…which is strange as you used 0px as width.


    Vertical alignment using position absolute is OK….it’s just that “top:50%” puts the top left corner of the element at 50% down from the top.

    So you have to drag the element up by 50% of its own height.

    You can do that with a transform:translateY(-50%);

    Also, remove any margin or padding from the heading.


    Thank you guys so much! It was strange as I was still seeing that pixel…but I cheated and added width 101% and overflow-x to the entire html page. It fixed the problem at least. :)

    Bad practice, I’m sure, but it worked.

    I don’t know why, but vertically aligning things has always been a problem for me.

    Thank you guys again!

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.