Html 文本与文本框的水平对齐

我有一个搜索框，我在它前面放了一个看起来像房子的UTF-8字符，代表家。我试图降低房屋字符，以便底部与文本框底部处于同一水平。现在角色稍微高一点

CSS

HTML

使用垂直对齐：中间对齐；有关量程和输入，请参见

，只需尝试：

#home{vertical-align: middle;font-size:200%;font-weight:bold;padding:0px;border:0px;margin:0px;}

使位置相对，然后调整顶部值以将其向下移动。

因为span标记是一个内联标记，您只需使用垂直对齐：中间；财产：

#home{[your code];vertical-align:middle;} 

---

请参阅。

如果将行放置在相对定位的元素中，然后绝对定位，则可以通过使用负-2px或正2px值向上或向下调整顶部控制来完全控制图示符的放置

CSS

HTML

---

您还可以通过调整边距属性来进行垂直放置

尝试使用“线高度”属性。你有一个我们可以玩的JSFIDLE吗？@matejkramny我尝试了线高度加负值，但运气不好。如果你有一个JSFIDLE，我可能可以进一步帮助你。。Thanks@matejkramny我不是一个有经验的程序员。我不知道如何使用JSFIDLE。这个解决方案在我看来有点太复杂了，事实上所有的元素都是内联标签，所以你可以根据它们自己的盒子模型来定位它们。

#home{vertical-align: middle;font-size:200%;font-weight:bold;padding:0px;border:0px;margin:0px;}

#home{font-size:200%; position:relative; top: 3px; font-weight:bold;padding:0px;border:0px;margin:0px;} 

#home{[your code];vertical-align:middle;} 

.containingElement {position: relative;}

#home {
  position: absolute;
  font-size:200%; 
  font-weight:bold;
  padding:0px;
  border:0px;
  margin:0px;
  top: 2px;
}

<form name='input' action='index.php?' method='get'>
<div class='containingElement'>
  <span id='home'>&#8962;</span>
  <input type='text' name='q' size=75 required autofocus>
</div>
<input type='submit' value=' SEARCH '>
</form>