Как центрировать большое текстовое поле поиска, например google?

Question

У меня есть этот сайт с небольшим текстовым полем для поиска слева.

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

Я хотел бы, чтобы изменить его свойства CSS для горизонтального центрирования его и сделать его как большой, как поиск Google текстовое поле.

Я пробовал margin-left: 50%; Маржа правый: 50%. или авто ... Ничего не работает.

Кто-то может мне помочь?

Answer 1

Я предполагаю, что вы имеете в виду этот элемент 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 2

В template.css найдите строку 1908 и добавьте text-align:center; в div.finder.

Answer 3

Я проверил выше website.You можно добавить Col-MD-12 класса рядом с форм-группа класс, чтобы сделать его шире, как Google. Если вы хотите, чтобы текстовое поле было в центре, пройдите через сетчатую систему бутстрапа.

Answer 4

@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 5

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