Question

我似乎无法将此文本垂直对齐。有人可以告诉我我做错了什么吗？我想要的是将这个“测试”文本的中心放在左边的图像中心，这是一个提交按钮。

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

谢谢你们..似乎无法弄清楚这一点。我一直有垂直对齐的问题。

<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

您应该将vertical-align: middle应用于图像元素，而不是跨度。这应该有效：

<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

这种情况下的对齐应该应用于图像而不是跨度。您可以使用INPUT标记的“align”属性来完成此操作：

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

或者，使用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>

为什么我不能垂直对齐这个文字？

2 个答案: