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和跨度居中，同时还能够改变div的宽度？

Here是代码的小提琴。

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望有所帮助：）

Answer 2

试试这个

span,input
{
 align:center;
}

希望它有所帮助： - ）

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

2 个答案: