NFT preview component using HTML and CSS

Community feedback

• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 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.

  Marked as helpful

  1

  ---

  

  Renardo Pine•50

  @PinedevsPosted over 2 years ago

  @DrMESAZIM I'll take you up on that. I tried using flexbox as recommended but the text won't reposition.

  0
• 

  David•8,000

  @DavidMorgadePosted over 2 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!

  Marked as helpful

  1

  ---

  

  Renardo Pine•50

  @PinedevsPosted over 2 years ago

  @DavidMorgade Thanks for that. I'll make sure to try it.

  1
• 

  Dodeun•250

  @DodeunPosted over 2 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 !

  Marked as helpful

  1

  ---

  

  Renardo Pine•50

  @PinedevsPosted over 2 years ago

  @Dodeun Thanks a lot. I'll try using it in some other projects to get a better hang of flexbox.

  0
• 

  imad•3,330

  @imadvvPosted over 2 years ago

  This comment was deleted about 2 years ago

  1

  ---

  

  Renardo Pine•50

  @PinedevsPosted over 2 years ago

  @imadbg01 Thanks alot. I'll keep that in mind when practicing.

  1
• 

  Pulkit saxena•890

  @Pulkit-s21Posted over 2 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

  1

  ---

  

  Renardo Pine•50

  @PinedevsPosted over 2 years ago

  @Pulkit-s21 I figured it would be something simple I just couldn't see. Thanks a lot.

  0