如何將Google等大搜索文本字段居中？

Question

我的網站左側有一個小的搜索文本字段模塊。

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

我想編輯他的CSS屬性，使其水平居中，並使其與Google搜索文本字段一樣大。

我嘗試了左邊距：50％； 保證金率：50％。 或自動...什么也沒做。

有人可以幫我嗎？

Answer 1

@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 */
}

Answer 2

我假設您是說這個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％？ 也許還有別的嗎？ 由您決定如何根據這些規則在網站其余版面中的使用情況進行定義。

Answer 3

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

Answer 4

我檢查了上面的網站。您可以在form-group類旁邊添加col-md-12類，使其更像Google。 如果您希望文本字段位於中心，請通過引導程序的網格系統。

Answer 5

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