Forums

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

Home Forums CSS Beginner need help editing a code (vertically aligning text)

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #184912
    hccook
    Participant

    Here’s what I’m working with:

    .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper {
    top: 0px;
    background: none repeat scroll 0% 0%;

    background: rgba(0, 0, 0, .7);

    filter:alpha(opacity=100); //For IE8 and earlier
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
    }

    .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper, .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p {
    text-align: center !important;
    }

    .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper p a {
    font-size: 16px;
    text-decoration:none !important;
    font-weight:thin;
    color: #ffffff !important;
    opacity: 1.0 !important;
    filter:alpha(opacity=100) !important; //For IE8 and earlier
    }

    .image-caption a {
    padding-top: 500px;
    padding-bottom: 500px;
    }


    I found that code here so I don’t understand hardly any of the things that went into building it. I have since figured out how to edit the text and colors within this code (trial and error), but I cannot for the life of me figure out how to vertical align the text in this hover effect.

    Here is the site where I am trying to insert it (squarespace): hannahclarecook.com/scenicdesign (password: hannahcook). As you can see, it’s a hover effect over a linked image where some of the text is a single line and some is multiple lines.

    Thank you thank you!!

    #185540
    Nocturnes1984
    Participant

    Wall of text hitting my face hard…opening a question with: here is what i have giant block of code……..gives me the jizzles!

    #185542
    Paulie_D
    Member

    Wow…that page loads/renders REALLLLLY slowly too.

    You might want to optimise that background image

    #185543
    Paulie_D
    Member

    Probably don’t need this….

    
    .image-caption a {
    padding-top: 500px;
    padding-bottom: 500px;
    }
    

    Try this instead

    
    .image-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    }
    
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.