Button Inspector

My Problem

While working on my project, I spent an inordinate amount of time trying to figure out how to center the search button on my index page which was frustrating. Even more frustrating was the fact that all of my google searches about the problem yielded a frustratingly simple solution, pieces of code like these:

button{
    margin: 0 auto;
}

or

div{
    text-align:center;
}

I tried both of these approaches in my CSS, but for reasons unknown to me my button was still clinging to the left side of my page.

Solution

I finally found the solution to my problem by injecting the style values I wanted for my button into the html rather than through the style sheet with this piece of code:

I am not sure whether injecting styles into your html is a very good practice, because it would make restyling them more complicated in the future, however it did get the button into the middle of the page.

Button Inspector

Trying to figure out why my button wasn’t rendering the way I wanted I checked out the inspector for that element on the page:

For whatever reason, I seem to have a lot of styles still remaining from the User Agent Stylesheet [default browser settings], I’m not sure if that means normalize isn’t functioning correctly or if I just need to override those settings. Looking at other websites, however, it seems that most sites leave very few of these default styles in. For example a button from J. Crew’s website:

Here the only thing left from the User Agent Stylesheet is the cursor, and seem to be working off of only 2 style sheets. I also checked the hamburger button on Google’s Material Design Guidelines site and found that they were working from 11 different stylesheets as well as the User Agent Stylesheet [makes sense as they design Chrome]. This was very overwhelming and I couldn’t really make sense of it. I would definitely check out the website though because it is the basis for a lot of Android design and also pretty.

Google Material Design