Как правильно выровнять элемент формы и ссылку img внутри div? - PullRequest
Новая
       11

Как правильно выровнять элемент формы и ссылку img внутри div?

1 голос
/ 26 декабря 2011

Я пытаюсь выровнять элемент формы (форму поиска) и ссылку img внутри div.Я попытался сделать «display: inline», чтобы они располагались на одной строке друг с другом, но не так, как предполагалось.Я также пытался регулировать ширину, плавание и позиционирование с отступами или полями, но все безрезультатно.Я поместил их в свои собственные дивы, думая, что это могло бы помочь, но у меня также не было никакого успеха с этим.Что я здесь не так делаю?Я знаю, что мой код, вероятно, выглядит ужасно стилистически, но вот их контейнер 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>

Любая помощь очень ценится !!

1 Ответ

0 голосов
/ 26 декабря 2011

Поместите элементы, которые вы хотите выровнять по вертикали, в 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.

...