can not be aligned to the flexbox

Question

I want to do input's in the center. Her it is the code:

    .input-container{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center
    
    }

    <!DOCTYPE html>
    <html>
    
    <head>
    <script src="/webcam.js"></script>
    <link rel="stylesheet" type="text/css" href="/CSS.css">
    </head>
    
    <body class="body">
    
     <div class="input-container">
           <input class="login" placeholder="login">
           <input class="password" placeholder="password">
     </div>
     
    </body>
    </html>

But you can not do it in the center. But in theory it should. What could be the problem. Thank you for your time!

[The HTML5 placeholder attribute is not a substitute for the label element](http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/) — Quentin, Apr 05 '18 at 13:29
Explain what you mean by center? 2 inputs in the same row? Right now they are centered but in 2 rows — Huangism, Apr 05 '18 at 13:29
at the centered of the page! according to the documentation on the site about the flexbox. Must be centered on my items! — Ildar2002, Apr 05 '18 at 13:44

score 0 · Answer 1 · answered Apr 05 '18 at 13:36

0

You need to add

flex-flow: row wrap;

To make them align in center sidebyside.

answered Apr 05 '18 at 13:36

Sonia

1,909
1
11
13

score 0 · Accepted Answer · answered Apr 05 '18 at 13:41

Add 100% height to body, html, and your container.

CSS:

html, body {
    height: 100%;
}
.input-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

should solve your issue. https://jsfiddle.net/m6wet5c7/7/

can not be aligned to the flexbox

2 Answers2