NFT preview component using HTML and CSS

Community feedback

• 

  IRVINE MESA•1,835

  @DrMESAZIM

  Posted almost 3 years ago

  Hi Renardo

  There are two easy ways to center the text which is use either flexbox or grid framework. In combination of text-align and justify-content properties .Align item center sets the content at the center

  If you find it difficult to resolve let me on and I can do YouTube video editing your code.

  11

  Marked as helpful
• 

  David•7,960

  @DavidMorgade

  Posted almost 3 years ago

  Hello Renardo, congrats on finishing the challenge!

  The best way to get the desired result you are asking on the question is using flexbox, you could wrap both items inside of a div and the in the div use:

  div {
    display: flex;
    justify-content: space-between / around
    align-items: center;
    gap: // the space you need between the two elements
    paddding: // the padding you need to make it look like the challenge
  }
  

  Try it for you nexts projects, hope my feedback helped you!

  11

  Marked as helpful
• 

  Dodeun•250

  @Dodeun

  Posted almost 3 years ago

  Hey !

  You asked how you could align the text to the center of the image. An easy way to do this is use Flexbox. I saw you used it in your body to center the card on the page.

  You can wrap your image and your text in a div, you then display: flex on this div and then can use align-items: center to do what you are looking for. Then you can apply a gap to this same div for the spacing between the image and the text, or use a margin on either one if you like it better.

  Gl hf !

  11

  Marked as helpful
• 

  imad•3,330

  @imadvv

  Posted almost 3 years ago

  This comment was deleted almost 3 years ago

  11
• 

  Pulkit saxena•870

  @Pulkit-s21

  Posted almost 3 years ago

  @Pinedevs Congrats on completing this challenge. For the last created by section put both the image and the text inside a div and then

  1. display: flex;
  2. align-items: center;

  Align item center sets the content at the center of the cross-axis and by default cross axis is verticle so that shoud get the text to be centered with the image

  11