CODEWITHSUNDEEP
htmlcss
Nino
Nino

Reputation: 129

How to center big search text field like google?

I have this website with a small search text field module on left.

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

I would like to edit his css properties to horizontally center it and make it as big as google search text field.

I tried margin-left: 50%; margin-right:50%. or auto... Nothing work.

Someone could help me please?

Upvotes: 1

Views: 1149

Answers (5)

Jijo Lopez
Jijo Lopez

Reputation: 36

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

Upvotes: 0

Alberto Rubio
Alberto Rubio

Reputation: 424

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

Upvotes: 2

Sukrut Bam
Sukrut Bam

Reputation: 87

I checked the above website.You can add col-md-12 class next to form-group class to make it wider like google. If you want textfield to be at center,go through bootstrap's grid system.

Upvotes: 0

mchaste
mchaste

Reputation: 92

In template.css find line 1908 and add text-align:center; to div.finder.

Upvotes: 0

David
David

Reputation: 218827

I assume you mean this input element?:

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

From what I can tell, part of the issue is that the containing div is set to display: inline-block (by way of the form-group class). Since that containing div doesn't take up the width of the page, anything centered within that div won't have all that width to use in centering itself.

If you allow the parent div to be display:block then it will take up the entire width of the page. Then center it and set the child input to an auto margin.

Forgoing CSS classes for a moment and just using inline styles to demonstrate, this is working for me (style rules added on new lines to illustrate):

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

There are of course other combinations of style rules which can achieve the same effect, and there may be CSS classes already available in your styling which can be used. The point isn't to copy/paste exactly what I have, but rather to identify that it seems to be the parent container(s) which is/are causing the issue.

Maybe center-align a parent or grandparent's text? Maybe stretch more width's to 100%? Maybe something else? It's up to you how you define it based on how these rules are used throughout the rest of the site's layout.

Upvotes: 0

Related Questions