How to align center the box div responsively?

user_16915242 0
Viewed 171

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.

google-web-designer web-deployment css html
5 Answers

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.

user_161068630

Change this

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

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>

user_169149360

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.

user_60993270

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>

user_44924620
Related