Skip to content
Submitted almost 2 years ago

Order Summary UI Card

Sanjog Patel•80
@Sanjog735
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How can i centered the Card Image Vertically ?

Community feedback

  • Eileen dangelo•1,600
    @EileenpkPosted almost 2 years ago

    Hi Sanjog! your project looks great, and this might be a helpful tip. To center the card in the middle of the page this code will work for you. For this CSS to work take the <h3 classname='author'></h3> and put it outside of the <section></section> tag but still inside the body. You can also change it to a <footer></footer> tag for more semantic code.

      body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
/* pushes the section to the center of the page */
  section {
    width: fit-content;
    margin-top: auto;
  }
/*  replace current .author  with this code - pushes the footer to the bottom of the page */
  .author {
    margin-top: auto;
  }

    If you found this helpful please mark it as such :) Let's connect on LinkedIn! www.linkedin.com/in/eileen-dangelo

    Marked as helpful
    0
    Sanjog Patel•80
    @Sanjog735Posted almost 2 years ago

    @Eileenpk Thank you

    0
  • Devesh shukla•280
    @deveshshuklaPosted almost 2 years ago

    Hi Sanjog, Your end project is good... just a few tips

    Follow Html5 Structuring so you don't get those warning

    1. <Head> Section
    2. <main>All body content</main>
    3. <Footer> If you want to add a footer

    Regarding your question Vertically centering the image place-content: middle might work. But I'm not sure if this is what are you asking.

    Marked as helpful
    0
  • Atif Iqbal•3,200
    @atif-devPosted almost 2 years ago

    Hi for centering do as:

    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    also read here about centering:

    =>https://www.freecodecamp.org/news/how-to-center-a-div-with-css-10-different-ways/

    =>https://moderncss.dev/complete-guide-to-centering-in-css/

    Hope you find this Feedback Helpful😇

    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