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

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

我尝试过添加

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

See the example.

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/

div内的垂直对齐问题

4 个答案: