flex alignment incorrect result

Question

I'm trying to align a line of text to the bottom of the screen with this code.

body,
html {
  height: 100%;
}

div.BottomAligned {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

<div id="Main" style="min-height: 100%;">
  <div>
    Line1<br> Line2
  </div>
  <div id="Bottom" class="BottomAligned">
    TextBottom
  </div>
</div>

However, the "TextBottom" text is shown below the visible portion of the screen, so the height of the Main div is actually bigger than 100% of the window size. Any ideas how to fix this?

True horizontal centering for the bottom text: https://stackoverflow.com/q/38948102/3597276 — Michael Benjamin, Mar 21 '18 at 19:29

Temani Afif · Accepted Answer · 2018-03-21T19:22:53.010

2

Maybe something like this:

body,
html {
  height: 100%;
}
body {
  margin:0; /* Don't forget to remove default margin */
}
#Main {
  display: flex; /* Main should be the flex container */
  flex-direction:column;
}

div.BottomAligned {
  margin-top:auto; /* Push items to bottom */
  text-align:center;
}

<div id="Main" style="min-height: 100%;">
  <div>
    Line1<br> Line2
  </div>
  <div id="Bottom" class="BottomAligned">
    TextBottom
  </div>
</div>

edited Mar 21 '18 at 19:22

answered Mar 21 '18 at 19:01

Temani Afif

245,468
26
309
415

In addition, I recommend the article https://css-tricks.com/snippets/css/a-guide-to-flexbox/ to understand flexbox – Fabian N. Mar 21 '18 at 19:03
This breaks center alignment for the text in the bottom. No obvious ways to fix it. – user626528 Mar 21 '18 at 19:11
1

@user626528 text-align:center :) – Temani Afif Mar 21 '18 at 19:22
I thought about justify-content: center, but it didn't work for some reason. – user626528 Mar 21 '18 at 19:24
@user626528 it works only if the container is flex ;) but no need here – Temani Afif Mar 21 '18 at 19:25

score 0 · Answer 2 · answered Mar 21 '18 at 19:09

In case you don't want to use flexbox, you can just replace the CSS with the below:

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

div.BottomAligned {
  width: 100%;
  display: block;
  position:absolute;
  bottom:0;
  left:0;
}

#Main {
  position: relative;
  height:100vh;
}

flex alignment incorrect result

2 Answers2