Why can't I vertical align this text?

Question

I can't seem to get this text to align vertically. Can someone please tell me what I'm doing wrong? What I want is to center this "test" text with the center of the image on the left which is a submit button.

<input type="image" src="send.gif" name="send" value="" />
<span style="font-weight:bold;padding:0;margin-left:20px;vertical-align:middle">test</span>

---

Thanks guys.. Can't seem to figure this out. I've always had issues aligning vertically.

<div id="postcomments">
  <form method="post" action="comments.php">
    <div>
      <h2>Comments</h2>
      Name:<br />
      <input type="text" id="name" name="name" />
      Email:<br />
      <input type="text" id="email" name="email" />
      Website:<br />
      <input type="text" id="site" name="site" />
      Story:<br />
      <select id="mute" name="mute">
        <option value="">hello</option>
      </select><br />
      Comments:<br />
      <textarea name="comment" rows="10" cols="46"></textarea><br /><br />
      <input type="image" src="send.gif" name="send" value="" />
      <span style="font-weight:bold;color:red;padding:0;margin-left:20px;vertical-align:middle">test</span>
    </div>
  </form>

Answer 1

The alignment in this case should be applied to the image and not the span. You can use the "align" property of the INPUT tag to accomplish this:

<input type="image" src="send.gif" name="send" value="" align="middle" />
<span style="font-weight:bold;padding:0;margin-left:20px;">test</span>

Alternatively, using CSS:

<input type="image" src="send.gif" name="send" value="" style="vertical-align: middle" />
<span style="font-weight:bold;padding:0;margin-left:20px;">test</span>

Answer 2

You should have the vertical-align: middle applied to the image element, not the span. This should work:

<input type="image" src="send.gif" name="send" value="" style="vertical-align:middle" />
<span style="font-weight:bold;padding:0;margin-left:20px;">test</span>