Return to previous page

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

This topic has 15 replies, 3 voices, and was last updated 2 years, 7 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!

    #320063 Copied Theme version: 7.4.0 WooCommerce version: 4.7
    14 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    March 20, 2022 at 15:25

    Hello,

    Could you provide temporary wp-admin access?

    Regards

    #320080 Copied
    Avatar: mariangio
    mariangio
    Participant
    March 20, 2022 at 15:39

    Hi. Here are the accesses
    thanks!

    Please contact administrator
    for this information.
    #320081 Copied
    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

    #320107 Copied
    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!

    #320141 Copied
    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

    #320151 Copied
    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!

    #320621 Copied
    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

    #320625 Copied
    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.
    #320628 Copied
    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

    #320675 Copied
    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

    #320680 Copied
    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!

    #320683 Copied
    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

    #320712 Copied
    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

    #320717 Copied
    Avatar: mariangio
    mariangio
    Participant
    March 28, 2022 at 13:52

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

    #320727 Copied

  • Tagged: , , , , , ,

  • 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

8theme customization service

Helpful Topics

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Niche Market – Multivendor WP WooCommerce Theme
lazy-placeholder
Plumbing Store – WordPress WooCommerce Theme
lazy-placeholder
Organic Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Marseille04 – WordPress WooCommerce Theme
lazy-placeholder
Ecoenergy – WordPress WooCommerce Theme
lazy-placeholder
Corporate – WordPress WooCommerce Theme
lazy-placeholder
Legenda – E-Commerce and Corporate PSD Theme
lazy-placeholder
Kidsstore – WooCommerce Theme
lazy-placeholder
Lingerie Store – WordPress WooCommerce Theme
lazy-placeholder
SEO Agency – WordPress WooCommerce Theme

See All Templates

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