I have a container with 2 items. I used flexbox to center them, but I want one of them on the middle, and another one on the bottom, but he has to be center also.
<section class="primary__section">
<img class=" primary__section__logo " src=../img/logo_png.png alt=" ">
<img class=" primary__section__scroll " src=../img/scroll.png alt=" ">
</section>
.primary__section {
background: url("../img/photo_up.png") no-repeat;
background-size: cover;
background-position: 50%;
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
&__logo {
width: 260px;
}
You could use margin :
.primary__section {
background: url("../img/photo_up.png") no-repeat;
background-size: cover;
background-position: 50%;
min-height: 100vh;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
[alt="middle"]{
margin:auto;
}
[alt=" bottom"] {
margin:0 auto 0;
}
/* let's test and see where the middle stands */
body {
margin:0;
background:linear-gradient(to left, transparent 50%, rgba(0,0,0,0.2) 50%),
linear-gradient(to top, transparent 50%, rgba(0,0,0,0.2) 50%)
}
<section class="primary__section">
<img class=" primary__section__logo " src=../img/logo_png.png alt="middle">
<img class=" primary__section__scroll " src=../img/scroll.png alt=" bottom">
</section>
to test and play with http://codepen.io/gc-nomade/pen/VKqGQm to find out if efficient or a good compromise.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With