Skip to content
Submitted over 3 years ago

Just plain HTML and CSS

antonio_p•40
@purplejragon
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • tomas•150
    @ttoomas

    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
  • Benja.min•740
    @BenjaDotMin

    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

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