How can I center this textbox using CSS?

jsFiddle

How can I centre the textbox within the span (#inner_span)? I have tried using margin-left:auto;margin-right:auto; but it doesn't seem to work.

CSS

div.user_form {
    background: #EEE;
    padding:15px;
    margin-bottom: 10px;
    border: #CCC solid 1px;
    -moz-border-radius: 15px;
}

.user_input_class {
    text-align: center;
}

HTML

<div class="user_form">
    <span class="user_form_inner_span" id="inner_span">
        <form>
            <span class="user_input_span">
                <input type="text" name="user_input" size="70" class="user_input_class">
            </sp开发者_Python百科an>
            <input type="checkbox" value="Private" name="private"> Option
            <center>
                <input type="submit" value="Add" class="add_user_button"
            </center>   
        </form>
    </span>
</div>

---

your span with #inner_span should actually be a div, as you cannot nest a block level form inside an inline element, however that's just for info, it doesn't matter to this problem ;)

it's actually the span user_input_span that the input is in which you need to center - spans are inline elements so they will not accept a width, which is why they won't center using margin: 0 auto; - you could convert the elements to inline-blocks with a width which should then do it, or even simpler use the inline elements with text alignment

1. center text in the form element
2. reset the text-alignment to left in the actual input element (or leave it centered if that's your preference)

---

.user_form {
    background: #EEE;
    padding:15px;
    margin-bottom: 10px;
    border: #CCC solid 1px;
    -moz-border-radius: 15px;
}

.user_form form {
/* center all the inputs in a form */
text-align: center; 

/* how to center the whole form*/
width: 600px; 
margin: 0 auto; 
background: #ffe;
}

.user_form span {
/* reset text-alignment in the inputs */
text-align: left;
}

---

margin-auto will work if parent has some width so try to apply some width to user_input_span like;

.user_input_span{
width: 100%; /* this can be as per your need or form width */
}
.user_input_class {
    text-align: center;
    margin-left: auto;
margin-right: auto;
}

Edit:

ok, here is your working code

.user_input_span{
width: 300px; /* this can be as per your need or form width */
display:inline-block;
}
.user_input_class {
    text-align: center;
    margin:0 auto ;
    width:80px;
    display:block;
}

updated on Fiddle