HTML/CSS position div with multiple input forms in center not working

Question

I have a simple DIV that has several input forms, and textarea inputs and a submit button. Now I would like this div to be centered in the center of the page instead of to the left how is it by default. I have tried all of the DIV centering methods I found searching but they always mess up the alignment of the text forms in the DIV when it is centered.

How could I center something like this in the middle of the page?

<style>
div.container {
  width: 70%;
}
input[type="text"] {
 margin: 0 auto;
 width: 50%;
 display: block;
 float: left;
 

  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
}

input[type="submit"] {
 margin: 0 auto;
 width: 100%;
 display: block;
 float: left;
 background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  border-radius: 4px;
  cursor: pointer;
}

textarea {
    width: 50%;
    float: left;
    resize: vertical;
    padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 4px;
}
</style>

<div class="center-div">
<div class="container">
<input type="text">
<input type="text">
<textarea id="text1" name="textbox" rows="10" cols="100" ></textarea>
</textarea>
<textarea id="text2" name="textbox" rows="10" cols="100"></textarea>
</textarea>
<br>
<input type="submit">
</div>
</div>

score 0 · Answer 1 · answered Oct 24 '20 at 05:05

The answer to your question is already here which is margin: 0 auto; for a block element that has a specific width, there is more than one way for centering a div nowadays, like using CSS flex or grid, but this one is a simple & old way to do that.

I have made some simple changes to your code in order to make it work and look better-

<style>
  .container {
    width: 70%;
    margin: 0 auto;
    background: rgba(0,0,0,.04);
    border-radius: 5px;
    padding-bottom: 8px;
  }
  
  input[type="text"],
  textarea {
    width: calc(50% - 16px);
    display: block;
    float: left;
    padding: 12px 20px;
    margin: 8px;
    box-sizing: border-box;
    border: 2px solid black;
    border-radius: 4px;
  }

  input[type="submit"] {
    margin: 0 auto;
    width: calc(100% - 16px);
    display: block;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 0;
    margin: 0 auto;
    border-radius: 4px;
    cursor: pointer;
  }
</style>

<div class="container">
  <input type="text">
  <input type="text">
  <textarea id="text1" name="textbox" rows="10" cols="100" ></textarea>
  <textarea id="text2" name="textbox" rows="10" cols="100"></textarea>
  <br>
  <input type="submit">
</div>

Thanks that works. How do I add text above each of the input forms? — PSwill2, Oct 24 '20 at 07:05
And about adding text, I'm just gonna say, you could use `label` tag for that, but what I would suggest is, google it like- '**html form template** you will get lots of free html template & learn from them. This is not a learning platform, here people ask questions that usually require lots of attention. Best of luck. Thank you — Tanim, Oct 24 '20 at 07:15

HTML/CSS position div with multiple input forms in center not working

1 Answers1