horizontal zentriert div und Spanne mit Eingangs Kind

Question

ich dieses Eingabefeld benötigen ein # vor dem Hex-Farbcode vorangestellt wird, wie so, als auch horizontal Zentrum sowohl die div und die Spanne Behälter:

<div id="color_wrapper"> 
    <span>#<input type="text" value="ffffff"></span>  
</div> 

Wenn ich versuche, mit der folgenden CSS:

html, body{ 
    margin:0; 
    padding:0; 
    font-size:22px; 
    color:#fff 
} 

#color_wrapper{ 
    border: none; 
    background-color:#444; 
    text-align:center; 
} 

span, input { 
    border: none; 
} 

input{ 
    outline:none; 
    width:85px; 
    background-color:transparent; 
    font-size:inherit; 
    color:inherit; 
    display:inherit; 
} 

ich nur begrenzten Erfolg zu erreichen, dass der Hash am Anfang ist und die Spanne und Eingabe scheinen zentriert werden. Das Problem tritt auf, wenn ich versuche, die Breite des Div einzustellen, und obwohl die Breite eingestellt ist, schnappt es zurück nach links.

Also, wie kann ich die div und die Spannweite zentrieren, während auch in der Lage, die Breite der div zu ändern?

Here ist eine Geige mit dem Code.

Answer 1

Geben Sie einfach margin: 0 auto für Ihre Div.

html body{ 
 
\t margin:0; 
 
\t padding:0; 
 
\t font-size:22px; 
 
\t color:#fff 
 
} 
 

 
#color_wrapper{ 
 
    width:300px; 
 
\t border: none; 
 
\t background-color:#444444; 
 
\t text-align:center; 
 
    margin:0 auto; 
 
} 
 
    
 
span, input { 
 
    border: none; 
 
} 
 

 
input{ 
 
\t outline:none; 
 
\t width:85px; 
 
\t background-color:transparent; 
 
\t font-size:inherit; 
 
\t color:inherit; 
 
\t display:inherit; 
 
}

<div id="color_wrapper"> 
 
\t <span>#<input type="text" value="ffffff"></span> \t 
 
</div>

Hoffe, es hilft :)

Answer 2

Versuchen Sie, diese

span,input 
{ 
align:center; 
} 

Hoffe, es hilft :-)