Jump to content
Trick_Master990

Your default way for making a centered buttons

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;}

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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*/            }

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...