Search code examples
javascripthtmlcssgoogle-custom-search

Cannot align Google Custom Search Engine input form which has a lot of padding at the bottom by default

I'm using the 'Classic' Google Custom Engine Search theme. It has a lot of padding towards the bottom and looks like this: It doesn't only look like this but it is actually it.

The only way I can vertically align it to the middle is by using padding-top but doing this increases the height of the navigation bar by maintaining the bottom padding. I have tried setting padding-bottom: 0. Then I tried vertical-align: middle. It is, also, added as a menu list item so it should be in the middle of the nav bar just like the other menu items except that it is floated to the right.

I have tried the other Google Custom Search themes as well. The default one's search button is squished and the search icon in/on it does not show. The rest is plagued with padding problem with the only difference being the padding-bottom value - some have more and some less. This should probably rule out any styling problem with my site because I had the same style throughout the Google Custom Search Engine theme-changing.

I'm using <script>...</script>(JavaScript) version for embedding GCSE.

Sorry I couldn't create a fiddle because my site uses a large no. of PHP files.

Solution

  • I have looked at your page and yo dont use vertical align for other items. And margin is caused by a form inside the search div. So this should work:

    .fp-search div {padding : 10px;}

.fp-search div div form {margin : 0;}