Forums

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
    Posts
  • #195510
    robertallen
    Participant

    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.

    http://codepen.io/robertallenbaker/pen/EaomMN

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

    http://billrice.staging.wpengine.com/less-distractions-less-tools/

    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.

    #195521
    robertallen
    Participant

    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.

    http://billrice.staging.wpengine.com/less-distractions-less-tools/

    #195533
    Paulie_D
    Member

    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%);

    http://codepen.io/Paulie-D/pen/EaowbP?editors=010

    Also, remove any margin or padding from the heading.

    #195695
    robertallen
    Participant

    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.