Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Just plain HTML and CSS

antonio_p 40

@purplejragon

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How do you center the text next to the logos? I added some padding to the top to fake it, but I want to know how to actually center the text vertically. vertical-align: middle; and vertical-align: center; don't seem to work.

Community feedback

tomas 150

@ttoomas

Posted

Hi, great job on this site!

You can center the text next to the logo using the flexbox: .avatar-text {display: flex; align-items: center} align-items

Otherwise, I recommend trying the following for the background image: Create a parent <button> that will have position: relative. Then create a pseudo-element :: before for this button, which will have content: url ("picture") position: absolute, opacity: 0 and center it with display: flex (picture view) . Then add only <img> to <button>. Then you do button:hover::before and add opacity: 1. I hope my advice helped.

Marked as helpful

1
Benja.min 740

@BenjaDotMin

Posted

Hello!

I would go for a display flex approach, rather than floats.

  • Remove the padding-top from .logo
  • Add to .logo, .eth and .time: display: flex; align-items: center;

This should centre them up nicely.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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