CSS / HTML centering a textbox

Question

This should be easy but its proving difficult...

My element I want centred is exactly this <input type="text">

I don't want the text centred, just the text box within the outer div.

This is my attempt which is not working

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

Where:

.temp123
{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
}

The text box remains on the left.

The outer div has a fixed with of 300px and itself is centered using margin: 0 auto;

Answer 1

.temp123{
  text-align:center;
}
.temp123 > input{
  text-align:left;
}

or simply (but not tested):

.temp123 > input{
  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;
}

Answer 2

in your CSS you're selecting the div's margin, the space outside the div.

You'll need to select it like .temp123 input {...}

Hope that helps.

Answer 3

Maybe I'm not getting the question but this should do it.

<style>
.temp123
{
margin: 0 auto;
margin-left: auto;
margin-right: auto;
text-align:center;
}
</style>
<div class ="temp123">
    <input type="text" />
</div>