How to align center the box div responsively?

Question

This is my html file

body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 30px;
}
h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}
.box {
  width: 1000px;
}
input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
input[type="text"] {
  background: #fff;
  width: 600px;
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
}
button {
  left: -5px;
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 110px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #ffc170;
  color: #fff;
  font-size: 21px;
}

<h1>This is my page title...</h1>
<div class="box">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>

My question is how can I align the box div align center(horizontally) responsively(dynamically) and how to make this webpage responsive when I checked this page's responsiveness it's not showing responsiveness.

Techy Shadow · Answer 1 · 2021-09-15T12:14:00.783

Try this code:

body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 30px;
}
h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}
.box {
  max-width: 1000px;
  width:100%;
  margin:0 auto;
}
input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
input[type="text"] {
  background: #fff;
  width: 600px;
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
}
button {
  left: -5px;
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 110px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #ffc170;
  color: #fff;
  font-size: 21px;
}

<h1>This is my page title...</h1>
<div class="box">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>

What I have done is that I have changed the

.box {
  width: 1000px;
}

to

.box {
  max-width: 1000px;
  width:100%;
  margin:0 auto;
}

You can also use display: flexbox; and justify-content: center; in the div box to get almost the same result

Here is the code that I think will work if you want to use flexbox:

body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 30px;
}

h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}

.box {
  display: flexbox;
  justify-content: center;
}

input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

input[type="text"] {
  background: #fff;
  width: 600px;
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
}

<h1>This is my page title...</h1>
<div class="box">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>

NOTE I have used max-widht: 1000px; in my first method, you can change that as per need.

Hi Techy Shadow, please add a small description what are the fixes that you have made the code working. This will make the solution more readable. — Nitheesh, Sep 15 '21 at 06:28
Yes, thank you for suggesting I am going to edit it right away — Techy Shadow, Sep 15 '21 at 11:57

score 0 · Answer 2 · answered Sep 15 '21 at 05:49

0

Change this

.box{
  max-width: 1000px;
  width:100%;
  margin:0 auto;
}

answered Sep 15 '21 at 05:49

Lalji Tadhani

14,041
3
23
40

score 0 · Answer 3 · answered Sep 15 '21 at 05:55

use this but the condition is your parent div has 100% width(window width).

or another way to use flex

form{
    width: 200px;
    margin: auto;
}

<body>
<h1>This is my page title...</h1>
   <div class="box">
       <form>
            <input type="text" name="" placeholder="Search here">
            <button type="button">Search</button>
       </form>
   </div>

</body>

score 0 · Answer 4 · edited Nov 14 '21 at 15:54

display: block fix needs these two blocks to be inserted in the css

.box {
  max-width: 1000px;
  margin: 0 auto;
}

form {
  width: max-content;
  margin: 0 auto;
}

Working Fiddle

body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 30px;
}

h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}

.box {
  max-width: 1000px;
  margin: 0 auto;
}

form {
  width: max-content;
  margin: 0 auto;
}

input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

input[type="text"] {
  background: #fff;
  width: 600px;
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
}

button {
  left: -5px;
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 110px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #ffc170;
  color: #fff;
  font-size: 21px;
}

<h1>This is my page title...</h1>
<div class="box">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>

If you are good to go with flexbox implementation, you could wrap your .box in flex and have a justify-content: center; to have an horizontal alignment.

Add the below update in your css for flexbox

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

Working flexbox fiddle

body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 30px;
}

h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}

.box {
  max-width: 1000px;
  display: flex;
  justify-content: center;
}

input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

input[type="text"] {
  background: #fff;
  width: 600px;
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
}

button {
  left: -5px;
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 110px;
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #ffc170;
  color: #fff;
  font-size: 21px;
}

<h1>This is my page title...</h1>
<div class="box">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>

Please note I have made use of max-width: 1000px; for .box in both examples. This is to make sure that the ui wont fail in the SO fiddle. You can update that as your requirement.

Habib · Answer 5 · 2021-09-15T07:11:49.397

You can follow the below code. I try to give some explanation where I changed and why I did it

  body {
  background-color: rgb(231, 59, 59);
  font-family: "Alata";
  font-size: 20px;
  margin: 0px;
}
h1 {
  margin-top: 100px;
  color: #202124;
  text-align: center;
}
.box {
  /*if you want to take result as a responsive then you need to add width as % not fixt size */
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

/*This div for form responsive */
.search-form{
  width: 90%;
  text-align: center;
  margin: 0 auto;
}
input {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
input[type="text"] {
  background: #fff;
  width: 70%; /* I change here for px to % base one your requerment */
  height: 50px;
  padding: 0 10px;
  border: none;
  outline: none;
  border-radius: 25px 0 0 25px;
  font-size: 15px;
  float: left; /* I change here for div assign as a left */
}
button {
  position: relative;
  border-radius: 0 25px 25px 0;
  width: 30%; /* I change here for px to % base one your requerment */
  height: 50px;
  border: none;
  outline: none;
  cursor: pointer;
  background: #ffc170;
  color: #fff;
  font-size: 21px;
  float: left;  /* I change here for div assign as a left */
}

<h1>This is my page title...</h1>
<div class="box">
  <div class="search-form">
  <form>
    <input type="text" name="" placeholder="Search here" />
    <button type="button">Search</button>
  </form>
</div>
</div>

Hi Habib, please add a small description what are the fixes that you have made the code working. This will make the solution more readable. — Nitheesh, Sep 15 '21 at 06:27
Hello @Nitheesh my change was dox size 1000px to 100% for covering responsive and I added one new dive which name search-form for form design responsive and I added some CSS for example form field alignment flot left and I used input field as %, not px — Habib, Sep 15 '21 at 06:35
your solution is working fine. Please add these words in the answer description. That will help your answer to be more explanatory. Just a friendly advice :) — Nitheesh, Sep 15 '21 at 06:50
Thank you @Nitheesh for your advice. I tried to give some notes. I think you would never mind give upvote — Habib, Sep 15 '21 at 07:19
Your comments are good, let the author determines the upvote and approval. — Nitheesh, Sep 15 '21 at 07:22

How to align center the box div responsively?

5 Answers5