2

I’m having some difficulty placing items where I want them in a flex container. The container itself has the following settings:

height: 100vh;
display: flex;
Justify-content: center;

I want the logo centered vertically and the address div to sit flush at the bottom of the container.

https://codepen.io/randometc/pen/djOpzN

So far I’ve been unable to get the address div to sit flush at the bottom of the container. I’ve tried 2 things but neither worked.

First I tried 

align-self: flex-end;

That did nothing and I don’t understand why.

Second thing I tried for the was this

margin-top: auto;

That puts the address at the bottom but pushes the logo itself up to the top.

How can I have the logo in the center vertically and the address div at the bottom using flex properties!?

Thanks for the help

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
tcarden
  • 23
  • 2
  • instead align-self( which would mean horizontal on column direction ) use margin:auto to center on both axis the flex child. https://codepen.io/gc-nomade/pen/zLoNPM else a reminder https://developer.mozilla.org/en-US/docs/Web/CSS/align-self – G-Cyrillus Jul 19 '18 at 18:35
  • @G-Cyr I would also remove the `margin-top: auto;` from the `.adress-wrapper`. This way it will be centered. – Amaury Hanser Jul 19 '18 at 20:19

3 Answers3

0

Add this style

.logo-wrapper {
  flex: 1 0 auto;
      display: flex;
    align-items: center;
}

See updated codepen 

.section-top {
  height: 100vh;
  background-color: orange;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.logo-wrapper {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
}

.logo-wrapper img {
  display: block;
  margin: 0 auto;
  width: 65%;
}

.address-wrapper {
  margin-top: auto;
  position: relative;
  border: 1px solid blue;
  font-size: 1.6rem;
  text-align: center;
  width: 100%;
  display: block;
}
<div class="section-top">
  <div class="logo-wrapper"><img src="http://www.caudillandcarden.com/some-logo.png"></div>
  <div class="address-wrapper">
    <span class="address">1234 Some 
Street, Somewhere KY 40502</span>
  </div>
</div>
Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
0

Set the .logo-wrapper's top margin to auto as well (pen):

html,
body {
  margin: 0;
  padding: 0;
}

.section-top {
  height: 100vh;
  background-color: orange;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.logo-wrapper {
  margin-top: auto;
  align-self: center;
}

.logo-wrapper img {
  display: block;
  margin: 0 auto;
  width: 65%;
}

.address-wrapper {
  display: block;
  margin-top: auto;
  border: 1px solid blue;
  font-size: 1.6rem;
  text-align: center;
}
<div class="section-top">
  <div class="logo-wrapper">
    <img src="https://picsum.photos/200/100">
  </div>
  <div class="address-wrapper">
    <span class="address">1234 Some 
    Street, Somewhere KY 40502</span>
  </div>
</div>
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
0

You have to change this in your css file:

.logo-wrapper img {
  display: block;
  margin:0 auto;
  width: 65%;
}
.address-wrapper {
  margin-top: auto;
  position:relative;
  border: 1px solid blue;
  font-size: 1.6rem;
  text-align: center;
  width: 100%;  
  display: block;
}
vitomadio
  • 1,140
  • 8
  • 14