Question

I’m trying to align a form element (search form) and an img link inside a div. I’ve tried doing ‘display:inline’, which set them on the same line as each other, but not as intended. I’ve also tried adjusting width, float, and positioning with padding or margins, all to no avail. I placed them inside their own divs, thinking maybe that would help, but I haven’t had any success with that either. What am I doing wrong here? I know my code probably looks horrible stylistically, but here is their container div and the code inside :

<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>

Any help is greatly appreciated!!

Answer 1

Put the elements you would like to align vertically in a div and use display: table-cell and vertical-align: middle, like this:

<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>

Also consider putting the style definitions in a separate css block/file.