Impossible centering with CSS3

Question

I cannot center an HTML5 search bar with CSS3

I am trying to make a page that adapts itself automatically to the device running it. First, I don't really know if I use the right units for this (I used exclusively % and em). Second, I want to make a page like I would make a wall of bricks : I make my bricks then place them (which translates in making H.T.M.L. blocks and attributing them classes so that even if I put the search bar or a single element of the menu on the other side of the page it still looks exactly the same and for this I need to do as more classes as I can once the body has been set up except in the CSS. file). Third, I want to avoid the use of JavaScript for this.

As a beginner in HTML. and CSS. I have been searching the Internet, without ever finding a correct answer, for a day now. Everything I tried failed despite sometimes working for people that were encountering the exact same problem. I also tried several web browsers (Chrome, Chrome Canary emulating a Nexus 4 and Safari) for no more success.

Here are the parts of my code that are implied :

HTML5

    <div class="search">
        <form method="get" action="">
            <input type="search" name="search bar" placeholder="rechercher un spot" class="searchBar"/>
            <input type="image" src="image.png" value="search" class="searchButton"/>
        </form>
    </div>
    <!--search-->

CSS3

 .search
{
    ;
}

.searchBar
{
    color: rgb(0,0,0);
    font-size: 1em;
    font-family: Arial, sans-serif;
    font-variant: normal;
    font-style: normal;
    font-weight: normal;
    width: 80%;
    padding: 1em;
    border-style: none;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
}

.searchButton
{
    ;
}

I tried to put margin-left: auto and margin-right:auto many times. In fact, I tried almost everything I found here on Stackoverflow and w3schools but nothing worked, the search bar still appears I did, to be honest, center the search bar with display: table (I tried display: block and stuff but it did not work) but when I opened the page on Chrome Canary's Nexus 4 emulation the page was a complete mess.

This is getting on my nerves for real now. Most of the solutions I found directly worked for people but not for me. I just do not know what to do, I am almost sure I am doing something wrong. I know I am doing something wrong. I though HTML and CSS. would be far simpler than JavaScript (which I really like) but it turns to be quite the opposite in the end ; those languages are just becoming a pain in my ass hour after hour now.

So if there is any good soul willing to lend me a hand I would be very grateful. Thanks.

Answer 1

If you're keeping with %-based widths, you can just set a margin-left of 10% (100% - 80% = 20%, divided by 2 for left and right margin = 10%).

width: 80%;
margin-left: 10%;

Here's a JSFiddle: http://jsfiddle.net/9uG8m/

Answer 2

You gave .searchBar a width of 80%, this is 80% of the document as the div it's in; .search has given width. What you want to do is change the width of .search cause it's unlimitedly wide now. Also you should give .search the following CSS:

margin-left:auto;
margin-right:auto;

This basically brings it to the center, as you want.

New CSS:

.search
    {
    margin-left:auto;
    margin-right:auto;
    width:80%;
    }

.searchBar
    {
        color: rgb(0,0,0);
        font-size: 1em;
        font-family: Arial, sans-serif;
        font-variant: normal;
        font-style: normal;
        font-weight: normal;
        width: 80%;
        padding: 1em;
        border-style: none;
        -webkit-border-radius: 0.5em;
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
    }

.searchButton
    {

    }

JSFiddle demo

Instead of using 80% width in .searchBar you might want to change it to:

width: -webkit-calc(100% - 30px);
width: calc(100% - 30px);

Where 30px has to be changed to the width of .searchButton (+ margins you might want) so they both fit in .search.