How to centre elements in a div

Question

I try to bring input fields in to the centre of the page. For some reasons the padding that I have set for the input fields moves them to right and I don't want this. Could please somebody help me to fix this? Here is the code.

.BeWeird_register_container {
  display: flex;
  justify-content: center;
}

.BeWeird_register_wrapper {
  width: 60%;
}

input[type=text],
select {
  border: none;
  width: 100%;
  padding: 30px 20px;
  margin: 8px 0;
  display: inline-block;
  background-color: #000;
  color: #BBFB34;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
  font-size: 1.2vw;
}

<div class="BeWeird_register_container">
  <div class="BeWeird_register_wrapper">
    <div class="BeWeird_login_wrapper">
      <div class="login_image"><img src="Images/LoginImage.png" alt="" /></div>
      
      <form method="post" action="BeWeird_login.php">
        <?php include('errors.php'); ?>
        <div class="login_form_wrapper">
          <div class="input-group">

            <input class="login" type="text" placeholder="Username" name="username">
          </div>
          
          <div class="input-group">
            <input class="login" type="password" placeholder="Password" name="password">
          </div>
          
          <div class="input-group">
            <button class="login" type="submit" class="btn" name="login_user">Login</button>
          </div>
      </form>
      </div>
    </div>
  </div>

Help would much appreciated. Thanks for in advance.

Does this answer your question? [CSS: center element within a
element](https://stackoverflow.com/questions/6810031/css-center-element-within-a-div-element) — Mr T, Mar 12 '21 at 14:27
https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically — Mr T, Mar 12 '21 at 14:27
As you can see from the properly formatted markup above, you have issues with closing tag order. I'd start there. — isherwood, Mar 12 '21 at 14:31

score 0 · Answer 1 · edited Mar 12 '21 at 14:39

0

In my opinion, you put display: flex in styles of the wrong container. You want to center the DOM of login_form_wrapper. Remember that flex-direction is set to row` as default.

Here's a nice explanation of how to use flex.
A Complete Guide to Flexbox

Correct me if I am wrong but as far as I understand that's what you are looking for:
JsFiddle David

edited Mar 12 '21 at 14:39

Dharman

30,962
25
85
135

answered Mar 12 '21 at 14:34

Dawid Raźny

1
1

score 0 · Answer 2 · answered Mar 12 '21 at 14:48

To center inputs in your form, add style="text-align:center;" to the parent element that contains the inputs, in this case that is the login_form_wrapper class.

Also, if you check the boxes in the browser (F12), you will see that the div BeWeird_login_wrapper shows larger than it should be. For simplicity, just make use of the structure above this heading MDN web docs and nest the divs.

score 0 · Answer 3 · answered Mar 16 '21 at 10:17

thanks for your help guys. The code was fine. It just needed in the input css code box-sizing:border-box;

like this:

input.login[type=text], select {
    border:none;
  width: 100%;
  padding: 30px 20px;
  margin: 8px 0;
  box-sizing:border-box;
 background-color: #000;
    color:#FEA6E5 !important;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
        font-size:1.2vw;
}

score -1 · Answer 4 · answered Mar 12 '21 at 14:32

-1

You can mention use:

outer-element{
display:flex;
justify-content:center;
align-items:center;
}

answered Mar 12 '21 at 14:32

Aditya Sarin

46
6

How to centre elements in a div

4 Answers4