html - 使用输入子项水平居中 div 和 span

Question

我需要这个输入字段在十六进制颜色代码之前添加一个#，就像这样，以及水平居中 div 和 span 容器:

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

当我尝试使用以下 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;
}

我取得了有限的成功，因为散列位于开头，跨度和输入似乎居中。当我尝试设置 div 的宽度时出现问题，虽然设置了宽度，但它会弹回左侧。

那么，我怎样才能使 div 和 span 居中，同时还能够更改 div 的宽度？

Here这是代码的 fiddle 。

Answer 1

只需为您的 div 指定 margin: 0 auto。

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

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

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

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

希望对您有所帮助:)