Question 45189 in Html Question posted in
Some basic documentation can be found here.

How to sets this input-box to center – Html

I’m learning CSS now and trying to imitate Youtube’s homepage.

But I don’t know how to set this input in the middle of this .input-box

Page's photo

Please help me to solve this problem.
I tried to search it on Google, but the solution will change the margin and i don’t know how.
Here is my code.

HTML:

<div class="input_box">
    <input type="text" placeholder="Search">
</div>

CSS:

.input_box {
    box-sizing: border-box;
    width: 519px;
    height: 26px;
}

.input_box>input {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    padding: 1px 0 1px 0;
    margin: auto;
    border: none;
    outline: none;

    font-family: inherit;

    box-sizing: border-box;

    background-color: #11274c;
    font-size: 100%;
}

I set the background color this way to make it easier for me to tell

Tags:

2

Answers


  1. 0 
    .input_box {
  display: flex;
  align-items: center;
}

    You may add the above style to your input box’s outer div so that it will behave as a flexbox container vertically aligning its items.

    To align items horizontally you can add justify-content: center;.

    Login or Signup to reply.
  2. 0 
    .input_box {
 box-sizing: border-box;
 width: 519px;
 height: 26px;

 margin: 0 auto;
 float : none;}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search