Skip to content
Submitted over 3 years ago

HTML & CSS including Flexbox

Jade•20
@jadedeterville
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How can I get the ".column" text to centre in the "#metrics-columns"? For example, "80K" should be centred over "Followers". I tried a few flex solutions i.e. align-items, align-self in the .column but no luck. Guidance appreciated.

Community feedback

  • Mel•225
    @Mel1207Posted over 3 years ago

    Hi,

    you can try to add text-align: center; at your #metrics-columns and inside your span .metrics try add display: block !important, I think it will work.

    Also your card lacks a little box shadow, but over all its good already, nice work!

    Marked as helpful
    0
    Jade•20
    @jadedetervillePosted over 3 years ago

    @Mel1207 Thank you so much for the tips! I implemented your tweaks. I completely missed the drop shadow as well. Have a good one!

    0
  • Moh•230
    @Moh2106Posted over 3 years ago

    Hi you can try using the text-align property: center or either you use the padding property to try to shift it towards the center I hope that my remarks will be useful to you good coding

    Marked as helpful
    0
    Jade•20
    @jadedetervillePosted over 3 years ago

    @Moh2106 Thank you, Moh!

    0

Please log in to post a comment

Log in with GitHub

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