如何集中大型搜索文本字段，如谷歌？

我有这个网站，左边有一个小型搜索文本字段模块。如何集中大型搜索文本字段，如谷歌？

http://217.23.14.121/~gauthier/demokratia/index.php?option=com_community&view=register&task=register&Itemid=127&lang=fr

我想编辑自己的CSS属性水平居中并使其大如谷歌搜索文本字段。

我试过margin-left：50％;保证金右：50％。或自动...没有工作。

有人可以帮助我吗？

来源

2016-05-14 Nino

你能否提供你到目前为止在这里试过的代码（HTML/CSS），最终到一个片段中，你可以使用如下形式的icone：[<>] –

put align =“center”on outer div – Nagaraju

我假定你的意思是，这input元素？：

<div class="form-group"> 
    <input type="text" name="q" id="mod-finder-searchword" class="search-query form-control" size="25" value="" autocomplete="off"> 
</div>

从我所知道的，问题的一部分是，含div设置为display: inline-block（由form-group类的方式）。由于包含div的页面不占用页面的宽度，因此在该div中居中的任何内容都不会具有用于居中本身的所有宽度。

如果您允许父div为display:block那么它将占用页面的整个宽度。然后居中并将子女input设置为自动保证金。

放弃CSS类一会儿，只用内联样式来证明，这是为我工作（上新线，说明样式规则）：

<div class="form-group" 
    style="display: block; text-align: center"> 
    <input type="text" name="q" id="mod-finder-searchword" class="search-query form-control" size="25" value="" autocomplete="off" 
      style="width: 200px; margin: auto;"> 
</div>

当然也有样式规则的其他组合它可以达到相同的效果，并且可以使用可以在样式中使用的CSS类。重点不是复制/粘贴我所拥有的东西，而是要确定它似乎是导致问题的父容器。

也许居中对齐父母或祖父母的文本？也许将更多宽度延伸到100％？也许别的东西？这取决于您如何根据这些规则在整个网站布局的其他部分中的使用来定义它。

来源

2016-05-14 10:44:44 David

在template.css中查找行1908并将text-align:center;添加到div.finder。

来源

2016-05-14 10:46:19 mchaste

我检查上述website.You可以添加旁边形式的基团类COL-MD-12类使其变宽像谷歌。如果您希望textfield位于中心位置，请通过引导程序的网格系统。

来源

2016-05-14 10:47:55

@media (min-width: 768px) 
    .form-inline .form-group { 
    display: inline-block; 
    width: 525px; /* This makes input size as Google */ 
}

/************************************/

div.finder { 
    margin-bottom: 20px; 
    text-align: center; /* This put you search bar always in the center */ 
}

来源

2016-05-14 10:54:38

谢谢@Alberto Rubio，但525px对于响应速度太大了。当我放80％或其他东西时，它太大了。 – Nino

.slideshow { 
    display:flex; 
    flex-direction:column; 
    align-items:center 
}

来源

2016-05-14 11:28:16

如何集中大型搜索文本字段，如谷歌？

回答

相关问题