0

I have a form that I want to move down using align-items:center property. This form is inside a parent wrapper div and has the id of left. As align items is used to position vertically, why does the left div stick to the top and not move down to the center?

To make it clear what I expect to happen, I have included an image https://twitter.com/yama_code/status/1061751980400488449

The left div has the following properties

        display:flex;
        flex-direction:column;
        flex:1;
        align-items:center;
        height:100vh;
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
lana
  • 281
  • 1
  • 3
  • 10
  • 2
    please include the enclosing HTML, and any other CSS that may affect the rendered result – Dacre Denny Nov 12 '18 at 01:21
  • In order for us to help you better, can you please update your question so that it shows **all** of your **relevant** code and details any failed [**attempts made so far**](http://meta.stackoverflow.com/questions/261592) in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve), along with clearly stating what your desired **result** is. For further information, please refer to the help article regarding [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask). – Obsidian Age Nov 12 '18 at 01:22
  • https://twitter.com/yama_code/status/1061751980400488449 – lana Nov 12 '18 at 01:27
  • *"As align-items is used to position vertically..."* That was your mistake. – Michael Benjamin Nov 12 '18 at 01:47

1 Answers1

0

The reason is because align-items affects the child elements, or the elements within the flex container.

Try instead putting the element you wish to be centre-aligned inside of a parent with #left's properties.

Frish
  • 1,371
  • 10
  • 20