0
<main>
    <div class="container">
        <div class="slider">
            <img src="img/frame-1.jpg" width="1300px" height="500px" alt="#">
        </div>
    </div>
</main>

CSS

.slider{
    display: flex;
    justify-content: center;
    align-items: center;
}

i am not able to center this img using align-items: center property

i want to center this img vertically between nv and footer

DwightSchrute
  • 11
  • 3
  • I think slider takes the dimensions of the image..so the image is centered vertically...try to set the height of the slider – Sfili_81 Aug 11 '22 at 07:43

1 Answers1

0

try removing the

.slider{
    display: flex;
    justify-content: center;
    align-items: center;
}

and adding the below code.

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

adjust the main tag height to your liking but it should be big enough to fill the gap i.e (100vh - (header + footer))

iamsumankarki
  • 32
  • 3
  • your solution worked and i had already done that height calculation thing using calc function, but can you explain why adding flexbox property didn't work? and how would i center this img using .slider class instead of using main as a selector? – DwightSchrute Aug 11 '22 at 07:50
  • align-items center didn't work because your .slider element is not filling the full vertical gap. If you inspect your .slider element you can see that it's height is dependent on the provided image. So, try adding another parent wrapper enclosing .slider element and cut and paste the logic from main element to the parent wrapper that you will be creating. – iamsumankarki Aug 11 '22 at 07:55