内联限制和边距：自动不适用于输入

Question

I am new to CSS. I want my textbox (input) to be center aligned, also, I want to set a specific height to it. I want it to be responsive, so I am using % instead of px. It (%) seems to be working for width, but not for the height. For height, only px values are working. Also, I assigned my input's display property to be inline-block and margin 0 auto , but it is not working. Where am I going wrong??

Here's the code:

input {
    width: 70%;
    margin: 0 auto;
    display: inline-block;
    height: 20%;
}

Here's a code sample.

 input { width: 70%; margin: 0 auto; display: inline-block; height: 20%; } 

 <input type="text"> 

Answer 1

If you want to use % for height you will have to add some helper CSS first. Like the following:

html,body{
  height:100%;
}

and for making the <input> centre use

margin: 0 auto;
display: block;

A working sample for you:

 input { width: 70%; margin: 0 auto; display: block; height: 20%; } html, body { height: 100%; } 

 <input type="text"> 

There is an easy another way if you are Interested you can go with vh [Viewport-height] , for this method, there is no need to use any other helping CSS to use, so the choice is yours..

A working sample for this method:

 input { width: 70%; margin: 0 auto; display: block; height: 20vh; } 

 <input type="text"> 

Hope this was helpfull.

Answer 2

In CSS, some, if not most, properties of an element depends on its parent's properties.

So, to make height: 20% work, you need to set a height for the input 's parent. In the example below, body is the parent of input .

To center-align an element using margin: 0 auto , the element must have display: block .

 html, body { height: 100%; /* Set a parent height */ } input { width: 70%; margin: 0 auto; display: block; /* Use display: block; */ height: 20%; } 

 <input type="text"> 

Answer 3

Set this style to input tag.

 input { width: 70%; margin: 0 auto; display: block; height: 20vh; } 

 <input type="text"> 

Answer 4

You need to give display:block for aligned center to input and display:inline-block is already apply here and give height to body,html for applying height to input

 html,body{ height:100%; } input { width: 70%; margin: 0 auto; display: block; height: 20%; } 

 <input type="text"> 

Answer 5

If you will not work with flex then display:block; and width is important for centering elements.

 div { width: 100%; display: block; } input{ display:block; width: 70%; padding: 5px; font-size:18px; margin:0 auto; } 

 <div> <input type="text"> </div> 

Answer 6

Change display: inline-block; to display: block; and height: 20%; to height: 20vh;

 input { width: 70%; margin: 0 auto; display: block; height: 20vh; } 

 <input type="text"> 

UPDATE

Only change display: inline-block; to display: flex;

 input { width: 70%; margin: 0 auto; display: flex; height: 20%; } 

 <input type="text">