使用浮动元素在div内垂直对齐问题 [英] Vertical align issue inside a div with float element

问题描述

我试图将输入与标签元素垂直对齐。

I am trying to vertical align middle for my input and a tag element inside a 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;
}

我想垂直对齐我的输入框和测试按钮在我的标题容器

I want to vertical align my input box and test button inside my title-container div and float these two items to the right.

上面的代码会得到我

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

我不知道如何浮动我的输入框和 按钮。任何人可以帮助我吗？感谢！

I am not sure how to float my input box and test button to the right. Can anyone help me about it? Thanks!

推荐答案

 #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;
 }

这篇关于使用浮动元素在div内垂直对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！