how to center block link button in product theme

Hi, I am using the product theme for another site im creating (i use it for every site - thank you tammie!) but i am having an issue with the link button on the blocks. if you go to americaninsuranceblog.com you will see "block 3" has a link button under it's image, however the link is aligned left. how can i align the link center?

i tried attaching a screenshot but there is no section on this window to upload an image?

  • Mason
    • DEV MAN’s Sidekick

    Hiya Daniel,

    Glad you're digging this theme. It's one I enjoy as well. Try this out and see how it does. Just add it to the bottom of where ever you're putting the custom CSS:
    .content-block a.button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    text-align: center;
    }

    Haven't tried it with IE, but works fine in firefox and chrome.

    Hope this helps. Thanks!

  • danieldalonzo
    • Site Builder, Child of Zeus

    @masonjames - thanks for the assistance. i don't understand what u mean. where do i put the code you posted? i dont know what u mean when u say "just add it to the bottom of where ever you're putting the custom CSS". im sorry im still learning!

  • danieldalonzo
    • Site Builder, Child of Zeus

    also, when i visit the site on my work PC's internet explorer, the three blocks and its contents are centered. the description text and the buttons are centered. i would take a screenshot but i do not know to do that with my old work PC. u will see what i mean when u visit the site http://www.americaninsuranceblog.com in IE

    something else you should know - i already have "<center>" typed infront of each block title because i wanted to center the title text, it seems as if it centered everything inside the block but only on IE. the way it looks on IE is how I want it to look in safari and firefox.

  • Mason
    • DEV MAN’s Sidekick

    Hiya Daniel,

    If you're unfamiliar with writing HTML/CSS these customizations may be a bit much to tackle on your own right off the bat. For instance, part of the fundamental "best practices" of web design is to keep your styling markup out of your html. For this reason, I wouldn't recommend using "<center>" in your theme files.

    HTML/CSS aren't too bad as far as learning goes and there's a ton of great resources out there. Take a look at some tutorials here:
    http://net.tutsplus.com/category/tutorials/html-css-techniques/ or grab a good book on the topic! HeadStart puts out some good books on Amazon that will walk you through the basics.

    It'd be a good idea to get familiar with how WordPress handle's theme structure as well.

    You could take a look at some of these tutorials Tammie has put together:
    http://buddydress.com/tutorials/
    Especially this one:
    http://buddydress.com/2010/06/firebug-installing-discovering-and-using-the-tutorial/

    Firebug is your best friend when it comes to customizing a design (it's how I put together the bit of code I posted above) :smiley:

    As to the code I mentioned above, you would want to place it in style.css. CSS works by the stuff at the bottom having a higher priority than that at the top (and also the more specific the identifier the higher priority) so placing the code at the bottom of this file and then saving will give you the best results.

    Hope this helps. If you want more specific ideas/solutions. Let us know and we'll help as best we're able!

    Thanks!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.