3

I have this code:

<div id="background">
  <div id="box">
    <ol>
    <li>asdf asdf asdf</li>
    ...
    </ol>
  </div>
</div>

CSS:

html, body {
  height: 100%;
  margin: 0px;
}
#background {
  display: flex;
  align-items: center;
  height: 100%;
}
#box {
  background-color: yellow;
  margin: 0 auto;
  width: 200px;
}

https://jsfiddle.net/tfuu63et/

It works fine, if the list is short. But if this is long, I can't see some items on the top of the list.

How can I repair that?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
user1639572
  • 93
  • 1
  • 7

3 Answers3

0

Have you tried align-items: flex-start? That seems to get the results you want.

Unless you're going to be using flex more extensively you could also just remove display: flex; and align-items and the list will still be centered in the page and start at the first list item.

Old Answer

Option 1

#background {
  display: flex;
  align-items: flext-start;
  height: 100%;
}

Option 2

#background {
  height: 100%;
}

Updated Answer

You could use CSS tables.

html, body {
  height: 100%;
  margin: 0px;
}
#background {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 200px;
}
#box {
  display: table-cell;
  vertical-align: top;
  background-color: yellow;
}

<div id="background">
    <ol id="box">
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
        <li>asdf asdf asdf</li>
    </ol>
</div>

Demo JSFiddle.

hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • Yes, but if the list is short I want to have this in the middle. – user1639572 May 26 '16 at 19:20
  • Ah, okay. That wasn't super clear to me in the question. I'll see what I can do. Is it just going to be this list on the page? Are you looking for vertical **and** horizontal centering? – hungerstar May 26 '16 at 19:20
0

Just omit align-items, you don't need it to get the desired look:

#background {
  display: flex;
  // align-items: center;
  height: 100%;
}
Shadi Shaaban
  • 1,670
  • 1
  • 10
  • 17
-1

Also you can use margin-top:50% on box class, you can change the value as your wish

elidag
  • 1