按钮和文本偏移 HTML答案

【问题标题】：button and text offset HTML按钮和文本偏移 HTML
【发布时间】：2015-10-20 13:38:05
【问题描述】：

这是我在这里的第一篇文章。我在一个网站上工作，我使用了一个表格来分隔不同的链接，但是我试图在一个将通过我的数据库更新的数字旁边放置一个按钮。我的问题是文本和按钮是偏移的，我无法让它们彼此保持水平。有什么想法吗？

我无法发布图片，因为我没有 10 名声望...

<tr>
    <td><img src="images/logo.png" alt=""/></td>
    <td>

    <strong><font size="8">3.5</font></strong>
    </td>
    <td>
    <button type="button" id="XYZ" class="btn btn-info btn-lg rateme" data-toggle="modal" data-target="#modal">Rate it!</button>

    </td>
    <td>
      <a href="http://www.example.com">
      <button type="button" class="btn btn-lg btn-default">Visit Site!</button>
      </a>
      </td>
  </tr>

【问题讨论】：

如果您将图像上传到图像共享工具，您可以发布链接，新用户最多允许 2 个链接。这是垂直对齐问题吗？
只是为了让您知道font 标签已过时，不应再使用：developer.mozilla.org/en-US/docs/Web/HTML/Element/font。此外，您不应该使用表格进行布局（除非制作电子邮件模板）

标签： html button text

【解决方案1】：

这似乎是一个垂直对齐问题，要解决它，只需将以下属性添加到您的 <font> 标签：

style="vertical-align: middle;"

所以你完成的<font> 标签应该是这样的：

<font size="6" style="vertical-align: middle;">3.5</font>

它应该看起来像：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td><img src="images/logo.png" alt=""/></td>
    <td>

    <strong><font size="6" style="vertical-align: middle;">3.5</font></strong>
    </td>
    <td>
    <button type="button" id="XYZ" class="btn btn-info btn-lg rateme" data-toggle="modal" data-target="#modal">Rate it!</button>

    </td>
    <td>
      <a href="http://www.example.com">
      <button type="button" class="btn btn-lg btn-default">Visit Site!</button>
      </a>
      </td>
  </tr>

【讨论】：