How do I position the search box to my specs?


Tags: css,wordpress

Problem :

I've got the search-form within a div but I can't seem to position it where I wan't. Using "top","bottom","left","right" commands aren't working. The command "margin: 0 auto;" centers the div on the x plane but not on the y plane. Anybody know why this is happening & how I can change it?

CSS

#box {
    height: 60px;
    width: 100%;
}
#postcode-search {
    height: 60px;
    width: 510px;
    border: 3px solid yellow;
    margin: 0 auto;
}

input#item-search.form-control {
    height: 50px;
    width: 450px;
    border: 1px solid #fd0e35;
    padding: 0px;
    top: 400px;
    vertical-align: middle;
    font-size: 14px;
    text-align: center;

HTML

<div id="box">
    <div id="postcode-search">
        <?php get_search_form();?>
    </div>
</div>


Solution :

You can do this with Flexbox

#postcode-search {
  height: 60px;
  width: 510px;
  border: 3px solid yellow;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div id="box">
  <div id="postcode-search">
    Search box
  </div>
</div>


    CSS Howto..

    How to get Sub Menu to right align using CSS

    How to keep an element fixed top within another element?

    How to target all elements, except last one with css?

    How to center an absolutely positioned item in CSS

    How to set original image for animate background image in css

    How to select Bootstrap's collapsed menu button with CSS

    How can `animation-play-state` in CSS be initially set to `paused` and changed to `running`?

    how to add embedded ruby in style tag

    HTML CSS Form - How to center the form on the page?

    How do I reduce the space between my menu titles and items?

    how to avoid extra blank page at end while printing?

    How to change the css class=“current” when using page jumping (single page website)?

    How do I make current menu item active in asp.net webforms

    Vaadin - How to customize MenuBar to look like links

    Z-index problem with ie7 … working in firefox. Images showing behind other img's

    How do I change the admin header color in Magento?

    How to display contents of several div tags in a same line

    how decrease font size?

    How do I move a list's bullet point to the right side of the text?

    How to add class CSS after ng-click to parent element?

    In how many ways and places we can place comment in CSS?

    How to Make Text Hovering Area not a Full Line?

    How to change the color of numbers in ordered list without using counter in css? [duplicate]

    How to apply CSS selector on Select Option Child

    How to align a link icon after the text via CSS?

    How can i edit font-size and font-family option in css file using sed?

    How to change css background color dynamically in php using color from database

    How to highlight a whole cell when hovering over link

    How to make highlighted table with rowspan

    CSS newbie: How to align my link to the right side of the page?