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, 1 months ago ago by 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

Rose Tyler

Support staff

March 20, 2022 at 15:25

Hello,

Could you provide temporary wp-admin access?

Regards

#320080 Copied

mariangio

Participant

March 20, 2022 at 15:39

Hi. Here are the accesses
thanks!

Please contact administrator
for this information.

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

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

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

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

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

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

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

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
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
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

mariangio

Participant

March 28, 2022 at 13:52

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

#320727 Copied
Tagged: content, display, middle, themes, vertical, woocommerce, wordpress
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

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

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection