How to Center this Button?

13 replies
  • WEB DESIGN
  • |
I'm having troubles centering the "Learn More" button on this page.

It's in it's own div, and I've tried manually adding a <center> tag around the shortcode for the image in the page editor for the homepage, but that doesn't do the trick.

Might anyone be able to help me figure out how to center that button?

Thanks in advance for your help.
#button #center
  • Profile picture of the author David V
    You can't center a float left or right...

    So do this:
    Code:
    div.maxbutton-5-container {
    float: none;
    text-align: center;
    }
    OH...

    and get rid of that <div align="center">.
    You should never have to use that...... really ever.

    EDIT: And just so ya know....

    When you want to move or position something, apply a style to the class your in... in most cases.
    If you need to create one, let's say <div class="my-box"> The content </div> then you can apply css styling to that to move it around, backgrounds, whatever.

    Something many people don't realize is applying styles to let's say my box, but not creating another div class or god forbid, an ID.

    So if you wanted to make all the text red inside the box^, then you can create a red text color in css, then add that to the box like so:
    <div class="my-box red"> The content </div>. The advantage is the "red" text color can be used elsewhere and not just "my-box". IE: <div class="my-other-box red"> The content </div>.
    {{ DiscussionBoard.errors[8173572].message }}
    • Profile picture of the author mrniceguy123
      Originally Posted by David V View Post

      You can't center a float left or right...

      So do this:
      Code:
      div.maxbutton-5-container {
      float: none;
      text-align: center;
      }
      OH...

      and get rid of that <div align="center">.
      You should never have to use that...... really ever.

      EDIT: And just so ya know....

      When you want to move or position something, apply a style to the class your in... in most cases.
      If you need to create one, let's say <div class="my-box"> The content </div> then you can apply css styling to that to move it around, backgrounds, whatever.

      Something many people don't realize is applying styles to let's say my box, but not creating another div class or god forbid, an ID.

      So if you wanted to make all the text red inside the box^, then you can create a red text color in css, then add that to the box like so:
      <div class="my-box red"> The content </div>. The advantage is the "red" text color can be used elsewhere and not just "my-box". IE: <div class="my-other-box red"> The content </div>.
      Sorry man, I'm confused. I added the code this to the styles.css:

      Code:
      div.maxbutton-5-container {
      float: none;
      text-align: center;
      }
      ...but the button is still showing up aligned to the left.

      I don't think I'm clearly understanding how to apply your instructions, or something.

      By the way, the <center> tag is no longer surrounding the shortcode that's in the page's html, so I'm not sure what's going on.

      I read what you posted multiple times, and even went and replaced the opening tag to the div to
      Code:
      <div.maxbutton-5-container>
      and it still didn't move the button to the middle.

      What am I getting wrong?
      {{ DiscussionBoard.errors[8174219].message }}
  • Profile picture of the author David V
    Maybe I should clarify that a bit....
    You already have that code in your style.css, you just need to modify it.
    When I look in your code I see you did do something, but the "float:left" is still there.

    Where are you adding the css? Inside the admin area in a css box, or right in the stylesheet itself?


    EDIT: You have many inline styles, that is where the the float:left still is, so it's overriding.
    #8040717 - Pastie

    and see thumb attachment
    {{ DiscussionBoard.errors[8174249].message }}
  • Profile picture of the author mrniceguy123
    I added it to the end of the CSS. I'm still not understanding what I need to modify.

    It's probably because of this other issue I'm experiencing that's frustrating the heck out of me.

    Sorry for being so slow to grasp what you're saying :-(

    I added that code to the end of the style.css, so the end of it looks like this:

    Code:
    a.maxbutton-5 {
    color: #fff; !important;
    }
    
    .art-sheet { 
    -webkit-box-shadow: 0 0 4px #333; 
    -moz-box-shadow: 0 0 4px #333;
    box-shadow: 0 0 4px #333; 
    }
    
    div.maxbutton-5-container {
    float: none;
    text-align: center;
    }
    
    /* Begin Additional CSS Styles */
    
    /* End Additional CSS Styles */
    {{ DiscussionBoard.errors[8174377].message }}
  • Profile picture of the author David V
    It's ok, no big deal.
    Now, the inline styles that I pointed out (thumbnail), are being put there from somewhere within the theme options most likely.
    Do you have an area in your theme options panel that allows you to enter custom CSS?

    Edit: Ok, I just gotta laugh... Your theme was built with Artisteer.... which I was just talking about in another thread.
    Likely you don't have a theme options area unless you built one.

    That means those inline style are hard coded into the theme somewhere (that's bad mojo..
    You need to find those inline styles and change it there.

    So forget about the style.css file for now, that's fine. Just find out where the inline style is hardcoded.
    Likely you'll need to browse the theme files on your computer rather then inside WP admin.
    {{ DiscussionBoard.errors[8174399].message }}
  • Profile picture of the author mrniceguy123
    Actually I do have theme options.

    Clicking on it takes me here:

    {{ DiscussionBoard.errors[8174454].message }}
  • Profile picture of the author David V
    Ok, cool... do you have a box for pasting css?
    If not, the inline styles are hardcoded somewhere.

    Really this boils down to hierarchy.
    You've made the changes correctly, but the inline style is overriding the change.
    {{ DiscussionBoard.errors[8174465].message }}
  • Profile picture of the author mrniceguy123
    Nope, there's no box for pasting CSS.

    What exactly am I looking for in the other files, div align center?

    Thanks for hanging in here with me, I'm trying to keep from throwing this computer, but that would only compound my frustration
    {{ DiscussionBoard.errors[8174483].message }}
    • Profile picture of the author David V
      Originally Posted by mrniceguy123 View Post

      Nope, there's no box for pasting CSS.

      What exactly am I looking for in the other files, div align center?

      Thanks for hanging in here with me, I'm trying to keep from throwing this computer, but that would only compound my frustration
      That's no problem... I'm still getting other stuff done in another tab
      Look at the thumbnail attachment where I pointed out the inline style. That's what your looking for.
      {{ DiscussionBoard.errors[8174488].message }}
  • Profile picture of the author mrniceguy123
    This theme consist of over 40 files.

    I was trying to hang in there since I'm blessed to have someone online helping me in real time, but I can't take it anymore. I'm way too frustrated at this time to look through all of these files.

    Thanks for your time, I'll give it another shot tomorrow after I get some rest.
    {{ DiscussionBoard.errors[8174512].message }}
  • Profile picture of the author David V
    Save yourself the headache. Use notepad ++ or sublime text 2 and use Ctrl+F and do a bulk search of all the files at once.
    {{ DiscussionBoard.errors[8174540].message }}
  • Profile picture of the author Patrick
    This will do it...

    Code:
    div.maxbutton-5-container {
        float: none !important;
        text-align: center;
    }
    To override inline styles, use " !important "
    {{ DiscussionBoard.errors[8175596].message }}
    • Profile picture of the author mrniceguy123
      Originally Posted by Patrick View Post

      This will do it...

      Code:
      div.maxbutton-5-container {
          float: none !important;
          text-align: center;
      }
      To override inline styles, use " !important "
      Yes! Victory!!!!!

      Thank you!!!!
      {{ DiscussionBoard.errors[8177034].message }}

Trending Topics