flexbox positioning, one item at top one at bottom

Question

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;
}

score 2 · Accepted Answer · answered Oct 21 '16 at 19:42

2

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.

answered Oct 21 '16 at 19:42

G-Cyrillus

101,410
14
105
129

That works perfectly, thank you! :) – Patryk Dąbrowski Oct 21 '16 at 19:51
Like @Michael_B pointed out in a comment I deleted some minutes ago. This solution does not trully center the first element. You can see that [**here**](https://jsfiddle.net/rickyruizm/qdr2aw85/) – Ricky Ruiz Oct 21 '16 at 19:56
So, is there any way to center it correctly? – Patryk Dąbrowski Oct 21 '16 at 20:00
@PatrykDąbrowski with absolute positionning for the bottom one http://codepen.io/gc-nomade/pen/JRwaQb but i usually dislike absolute positionning ;) – G-Cyrillus Oct 21 '16 at 20:07
So I will keep it like you showed me earlier, thanks you all for the help :) – Patryk Dąbrowski Oct 21 '16 at 20:09

flexbox positioning, one item at top one at bottom

1 Answers1