Comment centrer cette zone de texte à l'aide de CSS ?

Question

jsFiddle

Comment centrer la zone de texte à l'intérieur de l'espace ( #inner_span ) ? J'ai essayé d'utiliser margin-left:auto;margin-right:auto ; mais cela ne semble pas fonctionner.

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">
            </span>
            <input type="checkbox" value="Private" name="private"> Option
            <center>
                <input type="submit" value="Add" class="add_user_button"
            </center>   
        </form>
    </span>
</div>

Answer 1

Votre span con #inner_span devrait en fait être un div car il n'est pas possible d'imbriquer un niveau de bloc form à l'intérieur d'un élément inline, mais c'est juste pour info, ça n'a pas d'importance pour ce problème ;)

il s'agit en fait de la portée user_input_span que l'entrée est dans laquelle vous devez centrer - les portées sont des éléments en ligne et n'acceptent donc pas de largeur, c'est pourquoi elles ne se centrent pas à l'aide de la fonction margin: 0 auto; - vous pourriez convertir les éléments en inline-blocks avec une largeur qui devrait faire l'affaire, ou encore plus simplement utiliser les éléments en ligne avec l'alignement du texte

1. centrer le texte dans le form élément
2. réinitialiser l'alignement du texte à gauche dans l'élément de saisie actuel (ou le laisser centré si c'est ce que vous préférez)

---

.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;
}

Answer 2

Margin-auto fonctionne si le parent a une certaine largeur, essayez donc d'appliquer une certaine largeur à user_input_span comme ;

.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;
}

Editer :

ok, voici votre code de travail

.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;
}

mis à jour le Violon