Question

我正在尝试将input的中间位置与div中的标记元素垂直对齐。

我有

<div id='title-container'>
        <div id='logo'><img src='images/topLogo.png'></div>
       <div id='search'><input type='text'><a id='btn' href='#'>test button</a></div>
</div>

我想显示类似

的内容

----------------------------------------------------------------------------------
|
|    ----------------------------------                             
|    |            topologic.png       |               my input box    test button                         
|    ----------------------------------                        
|________________________________________________________________________________

CSS

#title-container{ 
   height: 80px;
  width: 980px;
  background-color: yellow;
  display: table-cell;
  vertical-align: middle;
}

#logo{
  display: table-cell;
  margin: 10px;
}
#search{
  display: table-cell;
  text-align: right;
  margin: 10px;
  vertical-align: middle;
}

我想垂直对齐我的标题容器div中的输入框和测试按钮，并将这两个项目向右浮动。

上面的代码会让我

----------------------------------------------------------------------------------
|
|    ----------------------------------                             
|    |            topologic.png        |my input box    test button                         
|    ----------------------------------                        
|_________________________________________________________________________________

我不确定如何将input框和test按钮向右浮动。任何人都可以帮我吗？谢谢！

Answer 1

 #title-container{ 
    height: 80px;
   width: 980px;
   background-color: yellow;
   display: table-cell;
   vertical-align: middle;
 }

 #logo{
   display: table-cell;
   margin: 10px;
 float:left;
 }
 #search{
   display: table-cell;
   text-align: right;
   margin: 10px;
   vertical-align: middle;
 float:right;
 }

Answer 2

这些标签确实有奇迹：

display: inline-block;
float: left;
float: right;

我认为这个jfiddle是你正在寻找的： http://jsfiddle.net/LeBsN/1/

使用float元素在div内垂直对齐问题

2 个答案: