html - 无法垂直对齐顶部的两个按钮

Question

在一个单行表格中，第一列和第二列的宽度分别为 20% 和 60%，随后是第二列该行中的 html。有一个浏览按钮和一个提交按钮。我希望它们都在顶部垂直对齐。我在 css 中提到了这一点，但我没有看到想要的结果。这可能是什么原因？

HTML 片段:

                <form method="post" action="#">
                 <div id="Files_to_be_shared"> 
                       <input type="file" id="File" name="FileTag" />
                       <input type="submit" value="Share" /> 
                 </div>
                </form>

相应的 css 片段:

#Files_to_be_shared {
    color:#FFEC94;
    vertical-align:top;
}

这是我看到的输出(我已经标记了我想要放置它的位置):

Answer 1

如果您使用的是 table，则将 valign="top" 添加到 td

& 添加 align="center" 使其与 td 的中心对齐

DEMO

---

或者试试这个

    #Files_to_be_shared {
      color:#FFEC94;
      vertical-align:top; 
      text-align:center 
    }
    td{
     border:1px solid grey; 
     vertical-align:top;
    }

DEMO 2