CODEWITHSUNDEEP
htmlcssweb
Gowri Sankar
Gowri Sankar

Reputation: 111

Input type doesn't center

I was practising some code and then this happened, The input text tag won't center. Margin: 0 auto; also doesn't seem to work either.

Here's the code I was working on.

HTML:

<input type="text" placeholder="Email">

CSS:

input {
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;  
font-size: 18px;
background-color: rgb(250,250,250);
margin:0 auto;
}

Can anyone help me out with this? and also a possible explanation?

Upvotes: 3

Views: 2839

Answers (4)

Shrikant
Shrikant

Reputation: 538

input {
        display:block;
         margin:0 auto;
      }

Upvotes: 1

Shrikant
Shrikant

Reputation: 538

<html>
<head>
<title>Page Title</title>
<style>
    input {
    outline: none;
    border-radius: 5px;
    border-style: none;
    height: 45px;
    width: 218px;
    padding:0 16px;
    font-family: Helvetica Neue;  
    font-size: 18px;
    background-color: rgb(250,250,250);
    position:absolute;
    left:300px;
  }

</style>
</head>
    <body>
        <input type="text" placeholder="Email">
    </body>
</html>

*just increase the left px where you want it.

Upvotes: 0

repzero
repzero

Reputation: 8412

try using display:block in input element

snippet

div{
  width:500px;
  height:500px;
  border:solid;
}
input {
display:block;
outline: none;
border-radius: 5px;
border-style: none;
height: 45px;
width: 218px;
padding:0 16px;
font-family: Helvetica Neue;  
font-size: 18px;
background-color: rgb(250,250,250);
margin:0 auto;
border:solid;
}
<div>
<input type="text" placeholder="Email">
</div>

Upvotes: 0

Prajwal Shrestha
Prajwal Shrestha

Reputation: 553

use this code:

input {
text-align:center;
}

click here for demo

Upvotes: 1

Related Questions