Question

我有一个搜索框，我在房子前面放置了一个代表HOME的UTF-8字符。我试图降低房子角色，使底部与文本框底部处于同一水平。现在这个角色略高了。

CSS

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

HTML

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

Answer 1

使用vertical-align: middle;作为范围和输入，请参阅JSFiddle

Answer 2

试试吧：

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

Answer 3

http://jsfiddle.net/xZPZs/

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

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

Answer 4

因为span标记是inline element，您只需使用vertical-align:middle;属性：

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

请参阅live example。

Answer 5

如果您将行放在相对定位的元素中然后绝对定位，则可以通过调整＆＃34; top＆＃34;来完全控制字形的位置。使用负（-2px）或正（2px）值控制向上或向下。

CSS

.containingElement {position: relative;}

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

HTML

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

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

文本与文本框的水平对齐方式

5 个答案: