在引导中垂直居中搜索框 [英] vertically centering search box in bootstrap

问题描述

Backgroud :: 我有一个真正的问题，垂直对齐搜索框，它是一种难以破解的坚果，并且我一直在这里待了几个小时，HTML标记很干净，请看看它::

问题:: 我一直在使用 display：table 和 display：table-cell 属性让搜索框垂直对齐，看看标记：

 < header> 
< img src =http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpgalt =层压板图像> 
< div class =location-search-container> 
< div class =input-group custom-search-form> 
< input type =textclass =form-control> 
< span class =input-group-btn> 
< button class =btn btn-defaulttype =button> 
< span class =glyphicon glyphicon-search>< / span> 
< / button> 
< / span> 
< / div><！ -  / input-group  - > 
< / div> 
 
< / header> 
  

注意头是 position：relative ， img 是 display：block 和 location-search-container 难度在哪里，它的位置是绝对的，并且应用了以下CSS：

  .location-search-container {
位置：绝对; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
 display：table; 
身高：100％; 
} 
  

理论上搜索框应该位于中间，但不是，请参阅 FIDDLE ::

$ b中的结果$ b

现在，稍微调整一下，可以删除image元素，并将以下附加属性添加到标题元素中：

 标题{
 position：relative; 
 / *添加以下两个属性* / 
 height：300px; 
背景：黄色; 
} 
  

现在看看搜索框是如何居中的（ FIDDLE ）。我对CSS相对来说很新，而且这是一个可以解决的问题。有人能告诉我我错过了什么吗？

我知道这需要付出一些努力，所以感谢您的时间和耐心。

Alex -z。

解决方案

您无法合并 position：absolute 和 display：table 并获得您期望的结果。相反，在搜索框上设置50％的顶部位置和负的顶部边距等于其高度的一半：

  .location- search-container {
 position：absolute; 
 top：0; 
剩下：0; 
 right：0; 
 bottom：0; 
} 
 .input-group {
 position：absolute; 
 top：50％; 
 margin-top：-17px; 
} 
  

演示

Backgroud:: i am having a really though problem vertically aligning a search box , its kind of a tough nut to crack and i have been at this for a few hours , the HTML markup is clean , have a look at it ::

Problem:: I have been using the display:table and display:table-cell properties to get the search box to align vertically, have a look at the markup :

<header>
    <img src="http://www.freestockphotos.name/wallpaper-original/wallpapers/download-images-of-gentle-dogs-6866.jpg" alt="image of laminates"> 
            <div class="location-search-container">
                <div class="input-group custom-search-form">
                    <input type="text" class="form-control">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                        </button>
                     </span>
                 </div><!-- /input-group -->    
            </div>

</header>   

Note that header is position:relative, img is display:block and location-search-container is where the difficulty lies , its positioned absolutly and has the following CSS applied ::

.location-search-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: table;
    height: 100%;
} 

theoretically the search box should be positioned in the middle , but its not , see the result in the FIDDLE ::

Now , a little tweak , lets remove the image element and add the following additional properties to the header element ::

header {
    position: relative;
    /*add the below two properties*/
    height: 300px;
    background: yellow;
}

now see how the search box is centered (FIDDLE). I am relatively pretty new to CSS and this one is a though nut to crack . can somebody tell me what am i missing ?

I know this is going to take some effort , so thank you for your time and patience.

Alex-z.

解决方案

You can't combine position: absolute and display: table and get the results you're expecting. Instead, set a 50% top position and a negative top margin on the search box equal to half its height:

.location-search-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.input-group {
    position: absolute;
    top: 50%;
    margin-top: -17px;
}

Demo

这篇关于在引导中垂直居中搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！