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

我有這個網站，左邊有一個小型搜索文本字段模塊。如何集中大型搜索文本字段，如谷歌？

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

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

回答

相關問題