垂直对齐问题在div内 [英] Vertical align issue inside a div

问题描述

我试图垂直对齐我的输入和一个标签元素在div。

我有

 < div id ='title-container'> 
< img id ='logo'src ='images / topLogo.png'> 
< div id ='search'>< input type ='text'>< a id ='btn'href ='＃'>测试按钮< / a>< / div> 
< / div> 
  

我想显示

  ----------------------------------------- --------------------------- 
 | --------------------------- 
 | | topologic.png |我的输入框测试按钮
 | --------------------------- 
 | ____________________________________________________________________ 
  

CSS

 ＃title-container {
 height：80px; 
 vertical-align：middle; 
 background-color：yellow; 
} 
 
 #search {
 display：inline-block; 
 vertical-align：middle; 
} 
  

我想垂直对齐我的输入框和测试按钮里面的 title-container div并将这两个项目右侧。 / p>



我已尝试添加

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

但是这些元素将位于title-container有人可以帮我吗？谢谢。

解决方案

这应该可以做到。

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 ='＃'>测试按钮< / a> 
< / div> 
< / div> 
  

CSS：

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

查看示例。

I am trying to vertical align middle for my input and a tag element inside a div.

I have

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

I want to display something like

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

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

I have tried adding

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

but those element will be on top of the title-container div instead of middle.. Can someone help me about it? Thanks.

解决方案

This should do the trick.

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.

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