Submitted about 1 year ago

Interactive rating component (please help)

adamawalters•20

@adamawalters

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I created an interactive rating component using HTML, CSS, and JavaScript.

Question:

I run code on thankyou.js (the thank you page) to align the items within the card container to the center. The code is: $('#card').css('text-align', 'center');

This works on the paragraph and headers within the card but not the image, which is still left-aligned. Could you please help me understand why?

Thank you!

Community feedback

Felipe Rios•280

@WolfMozart8Posted about 1 year ago

text-align is for text only, for images you could use margin: 0 auto or put the image into a div container with display: flex and using aling-items: center and justify-content: center.

#illustration-thank-you {
    width: 10rem;
    margin-top: 3rem;
    margin-bottom: 0;

/*this... or you can use `margin: 0 auto;` (the important thing is the **auto** for the sides left/right)*/
    margin-left: auto;
    margin-right: auto;   
}

And another option could be:

/*this is a div that have the image inside*/
.image-container {
    display: flex;
    justify-content: center;
    aling-items: center
}

Im not sure the $(#card) syntax that you are using (is that JQuery?), but pretty sure you can set those styles with that.

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord