在输入字段内对齐搜索图标

Question

如何在输入字段中对齐搜索图标（浮动在右侧的中心）？我环顾四周，发现了一些关于将其用作背景图像的东西，但不确定如何做到这一点。

.search {
	border: #cccccc solid;
	border-width:2px;
	padding:9px;
	font-size:24pt;
	border-radius:10px;
	margin:0; 
	padding-left:30px;
	height:54px
}
.search:focus {
	outline:none;
}
#search {
	position:relative; 
	padding:0; 
	margin:0;
}
#srch_icon {
	height:32px;
	width:32px;
}

<div id="search">
	<input type='text' class='search left'>
	<img src="search.png" id="srch_icon">
</div>

Answer 1

我肯定会使用背景图像：

#search input {
    background-image: url('search.png');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right center;
}

希望这能有所帮助！

Answer 2

您可以使用CSS仅使用background属性来定位图像。

background: color position/size repeat origin clip attachment image|initial|inherit;

在您的情况下：

background: url(search.png) right center no-repeat;

请参阅：http://jsfiddle.net/arglab/dgy79e8y/1/

---

顺便说一句，我认为这会更好看：http://jsfiddle.net/arglab/dgy79e8y/

Answer 3

您可以在这里放置背景图像，这是一个示例http://jsfiddle.net/29qoevve/background: white url(...