Center HTML in Twenty Eleven theme

  • Resolved thebookreporter

    (@thebookreporter)


    12 years ago

    I am trying to center a line of html code (for a blogads ad) in my Twenty Eleven theme. I have been consulting the forums on this topic over the past 2 days but nothing has worked.

    Specifically, I have tried sandwiching the code with <div align=center></div>, and <div style=”text-align: center;”></div>, and I have also tried creating a class in my CSS for centering text, using .alignCenter {margin: 0 auto;} and then sandwiching my code with the new class (again using <div…></div>. Nothing has worked. Most often the ad gets placed behind the foreground frame of my blog and way off to the right.

    I have a class in my CSS that seems to be meant for centering things but sandwiching my code with this class (again using div) doesn’t work either. Here’s the CSS code:
    .aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    Totally lost here, any help would be greatly appreciated!!

Viewing 8 replies - 1 through 8 (of 8 total)
  • WPyogi

    (@wpyogi)

    Can you post a link to your page where this is? It’s impossible to help with CSS issues without seeing it live.

    Or try using a browser tool such as Firebug to see what’s going on with the CSS.

    Thread Starter thebookreporter

    (@thebookreporter)

    Thanks for your response. The site is here: https://newbooksinbrief.com/

    The content I’m trying to center is just beneath the main header.

    WPyogi

    (@wpyogi)

    I can help you with that, but looks like you don’t have a child theme – which means that any changes you’ve made to theme files are going to be overwritten when WP is updated. Have you been modifying files?

    Thread Starter thebookreporter

    (@thebookreporter)

    Well, the only modification I’ve made was to add this code for the ad space. I didn’t think I would need to create a child theme unless I was modifying the structure of the theme itself. Am I wrong about this?

    WPyogi

    (@wpyogi)

    Yes, any changes you make to any theme files will generally be overwritten, so it’s really best to use a Child Theme. You can, of course, keep a copy of your files and then redo the changes, but that’s less than ideal. For CSS changes, you can also use a custom CSS plugin such as JetPack instead of a Child Theme, but for the ad, yes, a child theme would be the best approach.

    Thread Starter thebookreporter

    (@thebookreporter)

    O.k., good to know. Thank you. I’m now running a twenty eleven child theme. Now, how can I center that ad?

    WPyogi

    (@wpyogi)

    Excellent – Child Themes make us so happy around here :). So see if adding this to the new style.css file does it:

    div#adspot_935376471.adspot {
   margin: 0 auto;
}

    Thread Starter thebookreporter

    (@thebookreporter)

    It worked! And looks great!! Thank you so much, you’re a life-saver.

    Cheers,
    Aaron

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Center HTML in Twenty Eleven theme’ is closed to new replies.