Submitted almost 2 years ago

Interactive rating component (please help)

adamawalters•20

@adamawalters

A solution to the Interactive rating component challenge

Preview Code

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!

Code

Please log in to post a comment

Community feedback

Felipe Rios•280

@WolfMozart8

Posted almost 2 years 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

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