字段对齐问题Css

时间:2011-07-15 17:02:26

标签: css alignment vertical-alignment

嘿这是我的问题,我无法将tis输入字段与这些图像对齐,它们在div中,我将粘贴下面的代码 Image Of fields

那么你应该怎么做,坚持这个问题,需要快速回答plz

<div style="margin-bottom: 5px;"> 

 <input type="text" id="queryInput" value="pizza" style="width: 180px; height:30px;border: 1px solid #d3d6d9;padding: 4px 10px 2px 10px;background-color: white;-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px;border-radius: 5px;  font-size: 12px;   font-family: Droid Sans, Arial, sans-serif;"/> 
 <a href="javascript:doSearch()"><img src="img/search.png" /></a> &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 <a href="javascript:toggleStreetView()"><img src="img/street.png" /></a>
 <a href="javascript:toggleGoogleView()"><img src="img/google.png" /></a>

</div> 

5 个答案:

答案 0 :(得分:1)

答案 1 :(得分:0)

的CSS:

#queryInput {
    margin-top: -10px;
    float: left;
}

答案 2 :(得分:0)

通常,要垂直对齐,最好的方法之一就是让所有阻止框(这样他们可以接受宽度和高度),然后设置所有这些高度到最高框的高度,然后尝试垂直对齐每个框中的内容。在您的特殊情况下,搜索框的高度为30px。但正如@Jawad所说,你应该包含父div的CSS,以及其他元素的CSS,以便我们可以提供帮助。

答案 3 :(得分:0)

 div input, div a{
    display:inline-block;
    vertical-align:top;
    float:none;
    margin:0px;
    .display:inline;
    .zoom:1;
}

答案 4 :(得分:0)

  1. 尽量避免使用内联样式,是吗?

  2. 垂直居中图像,它们将与文本框对齐:

    &LT;风格&GT; div img {vertical-align:middle; } &LT; / style&gt;

  3. http://jsfiddle.net/mSgVg/