Trick_Master990 Posted May 22, 2015 Share Posted May 22, 2015 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 More sharing options...
COBOLdinosaur Posted May 23, 2015 Share Posted May 23, 2015 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 More sharing options...
dsonesuk Posted May 23, 2015 Share Posted May 23, 2015 (edited) 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 May 23, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted May 23, 2015 Share Posted May 23, 2015 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now