div内的垂直对齐问题

Question

我试图垂直对齐中间的输入和div内的标签元素。

我有

<div id='title-container'>
       <img id='logo' src='images/topLogo.png'>
       <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;
   vertical-align: middle;
   background-color: yellow;
}

#search{
   display: inline-block;
   vertical-align: middle;   
}

我想垂直对齐我的title-container div中的input box和test button并将这两个项目向右浮动。

我试过添加

#search{
   display: inline-block;
   vertical-align: middle;   
   float:right;  
}

但是这些元素将位于标题容器div而不是中间..有人可以帮助我吗？ 谢谢。

Answer 1

CSS中的vertical-align属性不能满足您的期望。 通常，内联元素可以通过vertical-align：middle在其上下文中垂直对齐。 但是上下文是他们所在的文本行的高度，而不是父文本。

见http://phrogz.net/CSS/vertical-align/index.html

Answer 2

这应该可以解决问题。

HTML：

<div id='title-container'>
    <div id='logo'><img src='http://placehold.it/60x40' /></div>
    <div id='search'>
       <input type='text' />
       <a id='btn' href='#'>test button</a>
    </div>
</div>

CSS：

#title-container{ 
   height: 80px;
}

#logo, #search {
    display: inline-block;
    height: 100%;
    position: relative;
    line-height: 80px;
    float: right;
}

#logo {
    float: left;
}

#logo img {
    vertical-align: middle;    
}

查看示例。

Answer 3

当您想要使用vertical-align ，您需要注意像图像之类的东西设置了默认的vertical-align值。 这意味着，即使您将其设置为父容器的middle ，默认情况下也会将其设置为图像本身的text-bottom 。

你需要为你想要以同样方式行事的所有元素强制它：

http://jsfiddle.net/H9XBA/

#title-container img#logo, 
#title-container #search { vertical-align: middle; }

......它将垂直对齐:)

Answer 4

通常，对于徽标，我喜欢将它们包装在DIV中，然后在该DIV中添加id。

另一种可以将它们垂直对齐到中间的方法是使用

display: table

对于父级div ...以及对于你想要对齐的孩子你放入：

display: table-cell;
vertically-align: middle

你可以在这里查看一个例子：

http://jsfiddle.net/combizs/QGg6P/