How can I display content in a div Vertically in the middle?

This topic has 15 replies, 3 voices, and was last updated 1 year, 11 months ago ago by mariangio

  • Avatar: mariangio
    mariangio
    Participant
    March 20, 2022 at 11:53

    Hi. I would like to display the content of the reviews (blue background with stars section of my home page), vertically aligned in the middle.

    I have added that css:
    .ivole-reviews-grid .ivole-review-card .crstar-rating::before, .cr-reviews-slider .ivole-review-card .crstar-rating::before {
    font-size: 20px;
    text-align: left;
    vertical-align: middle !important;
    }

    but it doesn’t work. Could you please help? Thanks!

    14 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 20, 2022 at 15:25

    Hello,

    Could you provide temporary wp-admin access?

    Regards

    Avatar: mariangio
    mariangio
    Participant
    March 20, 2022 at 15:39

    Hi. Here are the accesses
    thanks!

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 21, 2022 at 06:51

    Hello,

    Try to add the next code in Theme Options > Theme custom CSS:

    .customizeit .cr-review-card-inner .review_right_section,
    .cr-reviews-slider .review_right_section .middle-row {
    text-align: center;
    }
    .cr-reviews-slider .customizeit .cr-review-card-inner .review_right_section .top-row,
    .cr-reviews-slider .ivole-review-card .rating-row {
    justify-content: center;
    }

    Regards

    Avatar: mariangio
    mariangio
    Participant
    March 21, 2022 at 12:25

    Thanks. But I actually want to align the photo and the text in height not centre in width.
    Can you help with that? Thanks!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    March 21, 2022 at 14:52

    Hello,

    Added custom CSS to your child theme style.css. Check now.

    Regards

    Avatar: mariangio
    mariangio
    Participant
    March 26, 2022 at 13:46

    Thanks but could you remove it. It is not what I meant. I wanted to align in height not width.
    I have tried to disable /*align quote page*/
    .rfq-shop-table_customer_info td:last-child,
    .rfq-shop-table_customer_info table td:last-child {
    padding: 0px !important;

    }
    but seems like it isn’t what you had. Could you please remove what you added. Thanks!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 26, 2022 at 14:40

    Have you changed wp-admin access? We can’t log in.
    The code you can find in style.css file of xstore-child

    Regards

    Avatar: mariangio
    mariangio
    Participant
    March 26, 2022 at 15:18

    Hi sorry yes I did. Here is the new password

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 27, 2022 at 15:27

    Hello,

    Thanks for the reply.
    Olga will be back to work after the weekend, so you will get a reply tomorrow. Sorry for such a delay.

    Regards

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    March 27, 2022 at 17:58

    Hello,

    Take our apologies for my delay in answering. I commented out the code in the child theme. Added custom code to Theme Options > Custom CSS to align reviews vertically. Check and let me know if you wanted to achieve that result. If not then provide mockup how you would like to display that.

    Regards

    Avatar: mariangio
    mariangio
    Participant
    March 27, 2022 at 18:16

    Hi Olga
    Thanks for your reply but we get confused between us. I do not want it centre (horizontally).
    Would you mind putting it back as I did it before. Like that: https://pasteboard.co/qQwqQyOpbFKN.jpg

    When I said “centre vertically” it was the same space on top and on top of the block (picture+stars+text, aligned like the attached picture)

    I have looked at the added CSS that Rose added in “customize” both into theme custom CSS and additional CSS but I cannot see the display as it was before. Did she delete something? If you can just put it back to how it was, I would be grateful as I have no idea what was touched. Thanks so much for your reply on a Sunday!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    March 28, 2022 at 11:20

    Hello,

    Ok. The below code added

    .cr-reviews-slider .ivole-review-card .cr-review-card-inner {
        display: flex;
        align-items: center;
    }

    Check now.

    Regards

    Avatar: mariangio
    mariangio
    Participant
    March 28, 2022 at 12:49

    Thanks Olga for your reply. Thought I believe something else was removed. I can see that now the picture is on the side but it was meant to have column 1/3 2/3 and not 1/2 1/2, Could you help me with that. Thanks

    Avatar: mariangio
    mariangio
    Participant
    March 28, 2022 at 13:52

    Hi Olga,
    I was able to fix it. Thanks for your help.

  • Viewing 15 results - 1 through 15 (of 15 total)

The issue related to '‘How can I display content in a div Vertically in the middle?’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.