Search code examples
csscentering

Impossible centering with CSS3

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.

Solution

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