Design comparison
Solution retrospective
how to keep the cart icon on the same line as the "Add to cart text"
Community feedback
- @ahmedhanyhPosted almost 2 years ago
Hey! Congrats on completing your project.
This is an answer to your specific question on aligning the icon with the "Add to cart text"
One way to achieve this is by using flexbox to align a group of items in a single row or column. Try adding these styles to the element that contains the icon and the text, in this case the div.button_text (which isn't necessary by the way, it's better to remove it, to reduce your HTML markup, and apply the styles below on the <button> instead):
div.button_text /* or button, or whatever contains the icon and text */ { display: flex; align-items: center; gap: 12px; /* this only adds a gap between the icon and the text and not necessary for alignment */ }
Hope I've helped! Wish you the best on your journey.
Marked as helpful0 - @tanererenPosted almost 2 years ago
Hey! The project looks great, well done
If you remove the
display: block
fromimg
tag the elements will line up again and if you also remove themargin-left: 80px
they'll be centeredimg{ max-width: 100%; display: block; <-- REMOVE THIS! border-top-right-radius: 10px; border-top-left-radius: 10px; } .cart_icon { margin-left: 80px; <-- REMOVE THIS! padding-top: 0px; }
The default value is
display: inline
,display: block
will make it so that the element starts on a new line and take up the whole width - not what we want hereAdd padding to the button after too!
Happy coding! :)
Marked as helpful0 - @nenadmnePosted almost 2 years ago
Hello, i look into code
<button> <div class="button_text"><img class="cart_icon" src="./images/icon-cart.svg" alt="cart"> <span>Add to Cart</span> </div> </button>
From this html part, remove div that is inside button, and put button class
class="button_text"
instead. Div in not supposed to be inside button.After that go in css and type
.button_text { text-align:center}
. This will center img and text in button.To make space between them just margin it in css.
Keep up =)
0
Please log in to post a comment
Log in with GitHubJoin 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