How to Center this Button?

by 13 replies
15
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.
#website design #button #center
  • 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>.
    • [ 1 ] Thanks
    • [1] reply
    • 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?
  • 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
  • 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 */
  • 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.
  • Actually I do have theme options.

    Clicking on it takes me here:

  • 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.
  • 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
    • [1] reply
    • 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.
  • 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.
  • 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.
  • This will do it...

    Code:
    div.maxbutton-5-container {
    float: none !important;
    text-align: center;
}
    To override inline styles, use " !important "
    • [1] reply
Join the discussion

Next Topics on Trending Feed

  • 15

    How to Center this Button?

    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.