在引导中垂直居中搜索框 [英] 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;
}
这篇关于在引导中垂直居中搜索框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!