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

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

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

источник

2011-12-26 gareit

Вы пытались разместить 'vertical-align: middle;' внутри 'tag_' стиль тегов? – sooper

Вы хотите что-то вроде [этого] (http://jsbin.com/eyuzak/edit#html)? –

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

источник

2011-12-26 18:20:38 Parzifal

@Sooper, да, я попробовал это, это было странно приурочено, я попробовал вертикально-выровнять: средний на один, затем вертикально-выровнять: (x%) на другом, чтобы правильно выровнять их, но он, похоже, работал только в ie9 – gareit

@ Ронак, спасибо за попытку, но нет. Я хотел, чтобы img/form находился на одном и том же вертикальном уровне. – gareit

Спасибо, Парзифаль, я считаю, что ваше решение работает. Однако изменение контейнера div сделало его позиционированием в его изменении контейнера. Я попытался изменить положение, изменив поля/отступы, но не повезло. Теперь это выглядит отлично, поскольку я только увеличил ширину, чтобы сделать ее полноценной коробкой, но так, чтобы я знал в будущем, есть ли какая-то конкретная причина, почему это будет препятствовать моей способности перемещать div? В любом случае, спасибо! – gareit

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

ответ

Смежные вопросы