html - 如何在 div 中垂直对齐表单元素和 img 链接

Question

我试图在一个 div 中对齐一个表单元素(搜索表单)和一个 img 链接。我试过做“显示:内联”，将它们设置在同一行，但不是预期的那样。我也试过用填充或边距调整宽度、 float 和定位，但都无济于事。我将它们放在自己的 div 中，认为这可能会有所帮助，但我也没有取得任何成功。我在这里做错了什么？我知道我的代码在风格上可能看起来很糟糕，但这是他们的容器 div 和里面的代码:

<DIV style="BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BACKGROUND-COLOR: rgb(127,137,155); MARGIN: 3% auto auto; WIDTH: 670px; HEIGHT: 60px; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid" id=links>
  <div style="border:0px;width:330px;display:inline;float:left; height:45px; margin-left:4%;margin-top:5%;margin-bottom:5%;"><FORM method=post name=search action=http://dummysearchaddress/search><INPUT name=searchText> <INPUT value="Knowledge Base Search" type=submit> </FORM></div>
  <div style="border:0px;width:300px;display:inline;height:55px; margin-left:3%;margin-top:20%;margin-bottom:5%;"><A href="http://dummyimg"><IMG style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid;BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid;" alt="Technical Support Manual" src="file:///C:/Users/Instructor/Desktop/img/Tech_Manual_button_204%20by%2027.png"></A>     </div>
</DIV>

非常感谢任何帮助!!

Answer 1

将你想要垂直对齐的元素放在一个 div 中，然后使用 display: table-cell 和 vertical-align: middle，如下所示:

<div class="center" style="height:300px">
    <img ...>
    <form ...>
</div>

<style type="text/css">
.center {
     display:table-cell;
     vertical-align:middle;
}

/* put the two elements next to each other */
.center img, .center form {
     display: inline-block;
}
</style>

还可以考虑将样式定义放在单独的 css block /文件中。