Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • February 15, 2015 at 1:16 pm #396366
    royaltask

    I use this

    .av-masonry-entry:before {
background: url(p-bg-1.jpg) repeat transparent;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
content: attr(title);
margin-top: -(height/2)px;
vertical-align: middle;
}

    text-align: center; takes care about being centered horizontally.
    vertical-align: middle; has no effect on showing vertically centered

    Can you help me to center my title vertical?

    • This topic was modified 9 years, 10 months ago by royaltask.
    February 16, 2015 at 12:26 pm #396639
    Yigit

    Hey royaltask!

    Can you please post the link to your website and a screenshot showing the changes you would like to make?

    Cheers!
    Yigit

    February 16, 2015 at 12:45 pm #396650
    royaltask
    This reply has been marked as private.
    February 16, 2015 at 7:17 pm #396957
    Ismael

    Hey!

    Try to replace the code with this to vertically center align the element:

    .av-masonry-entry:before {
background: url(p-bg-1.jpg) repeat transparent;
position: absolute;
width: 100%;
height: 100%;
text-align: center;
content: attr(title);
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

    Regards,
    Ismael

    February 16, 2015 at 9:51 pm #397104
    royaltask

    I had no luck on this.
    changes nothing (cache cleared) exept title shows a little higher.

    February 17, 2015 at 5:51 pm #397662
    Andy

    Hi!

    can you please post a link to your website showing the issue? otherwise we can just guess.
    Try to play around with these values in Ismael’s code:

    left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

    and adjust as needed.

    Best regards,
    Andy

    February 22, 2015 at 7:22 pm #400250
    reisp

    I’m having a problem trying to do the exact same thing … center the title and price vertically on a masonry element. I tried the above code and it didn’t work… any ideas?
    Here’s a link to the example : LINK

    February 23, 2015 at 12:21 pm #400568
    Ismael

    Hi!

    Use this:

    .av-inner-masonry-content-pos {
top: 50%;
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
position: absolute;
}

    Best regards,
    Ismael

    February 27, 2015 at 10:15 pm #403694
    reisp

    Thanks Ismael, that worked perfectly.

    I have another issue regarding centering text with the masonry element…. here’s the scenario :

    I have two masonry galleries on a page each containing two (2) images each, and both are set to Perfect Masonry. On the top gallery I set the column number to ‘3’ and the bottom one to ‘4’. I did this to achieve a tiling effect so that the images stay grouped together on both top and bottom when the page size changes. However this causes an issue when trying to center the text horizontally. It seems like the width is being calculated using the column number instead of the image number, so the text is off center. Is there a way around this, or a solution to calculating the horizontal center for this type usage with the masonry element?

    here’s the page: Example

    March 2, 2015 at 5:25 am #404277
    Ismael

    Hey!

    This should work:

    #home_grid1 .av-inner-masonry-content-pos, #home_grid2 .av-inner-masonry-content-pos {
top: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
position: absolute;
left: 50%;
}

    Regards,
    Ismael

    March 2, 2015 at 6:05 pm #404646
    reisp

    Ismael, you are the man! That worked perfectly. Thanks you so much for your top-notch support.

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Portfolio Pseudo Title .av-masonry-entry:before – center vertical’ is closed to new replies.