Skip to content
Submitted over 1 year ago

Result summary page with CSS flexbox

David Oluremi•100
@VectorGits
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

During this project I had difficulty with vertically aligning icons so they fit with text (I've had problems with this in the past)

Funny how the CSS code for that is vertical-align: center;

Hope you like it!

Community feedback

  • John Mirage•1,590
    @john-miragePosted over 1 year ago

    Hello,

    A solution to align 2 elements in a row is to use flexbox

    <div class="row">
<svg class="icon"></svg>
<p class="text"></p>
</div>

    .row {
display: flex;
flex-direction: row;
align-items: center;
}

    The svg and the p will be vertically aligned.

    Marked as helpful
    0
    David Oluremi•100
    @VectorGitsPosted over 1 year ago

    Thanks a lot for this insight, I really appreciate it and have learnt from it @john-mirage

    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