Question

我试图在div中对齐表单元素（搜索表单）和img链接。我尝试过显示：inline＆＃39;，它们将它们设置在彼此相同的行上，但不是按照预期的那样。我也尝试用填充或边距调整宽度，浮动和定位，但都无济于事。我把它们放在自己的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块/文件中。

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

1 个答案: