如何根据输入文本内的图像对齐文本？

Question

<input type="text" class="usernm"
             style="color:black;font-weight: bold;outline-width: 0;"
             id="username" />

以上是我的HTML代码。我想在文本字段中添加图标。但我不知道如何根据图标对齐文本，以便文本和图标都居中对齐。有人建议解决这个问题。

Answer 1

使用css你可以做类似的事情（我建议你给你添加一个id img标记，因为以下内容会影响你所有的img标记）

.img {
    position: relative;
    top : -5 px;
}

#username {
    position: relative;
    top : -5 px;
}

Answer 2

请尝试以下操作： Demo

的CSS：

.text_box {
    background:url('user.png') left center no-repeat;
    border: 1px solid #DDD;
    height:30px;
    width:90%;
    padding-left:20px;
}

HTML：

 <input type="text" value="Please enter a username" class="text_box" />

使用 autocomplete

更新了演示