Jump to content

Your default way for making a centered buttons


Trick_Master990

Recommended Posts

So, yeah, I want to know your style. Maybe I can optimize mine from it. Here's mine:HTML

<div id="wrap">     <div id="menu">           <a class="button" href="main.html" class="button">Button 1</a>           <a class="button" href="" class="button">Button 2</a>           <a class="button" href="" class="button">Button 3</a>           <a class="button" href="" class="button">Button 4</a>     </div></div>

CSS

#wrap {       text-align: center;    margin-top: -7px;}#menu {    display: inline-block;}.button {    background-color: #000000;    color: #FFFFFF;    width: 100px;    padding: 5px;    text-align: center;    text-decoration: none;    float: left;}
Link to comment
Share on other sites

I don't think you should need the outer wrapper, and the prefered way to center is with margin: auto. You probably don't need the negative margin if you eliminate the extra line feed you get because of the using the wrapper. Why are you using float:left if you want centered alignment?

#menu {width:70vw;text-align: center;margin: -7px auto 0 auto;.button {background-color: #000000;color: #FFFFFF;width: 100px;padding: 5px;text-align: center;text-decoration: none;float: left;}

The value of the width probably needs adjustment based on actually content and the devices being targeted.

Link to comment
Share on other sites

Without using the float, the anchor element being a inline element would ignore the width applied. Using display: inline-block; you would have the problem of spacing showing between each link because on how the layout of links is stacked, and not butted together, UNLESS! You 0 the font-size: for #menu and reinstate font-size for actual anchor links themselves.

 

The reason for -7px top margin is probably required cuz the body margin has not been reset to 0;

Edited by dsonesuk
Link to comment
Share on other sites

You are duplicating class for 'button'

 

The old method was to use position: relative as below, but usually this would be applied to parent container and UL of the a menu using unordered list.

            #menu {                /*display: inline-block; removed by dsonesuk*/                float: left; /* added by dsonesuk*/                position: relative; /* added by dsonesuk*/                left:50%; /* added by dsonesuk*/            }            .button {                background-color: #000000;                color: #FFFFFF;                width: 100px;                padding: 5px;                text-align: center;                text-decoration: none;                float: left;                                position:relative;/* added by dsonesuk*/                left: -50%;/* added by dsonesuk*/            }
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...