Centre a doubleclick ad

Question

I'm not sure how to centre a doubleclick ad horizontally. After reading this similar question Centre align leaderboard ad, I'm using this code now

<div class="center"> 
<style type="text/css">
.center {
    text-align: center;
    margin: 0 auto;
}
</style>

AD CODE

</div>

But it doesn't work. Any ideas?

To clarify, the ad is being used on this website. http://worldgreendaily.com/

The total code on the page is:

<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
$page_layout = get_option(THEME_NAME."_page_layout");
//logo settings
$logo = get_option(THEME_NAME.'_logo'); 
$search = get_option(THEME_NAME.'_search'); 
//top banner    
$topBanner = get_option(THEME_NAME."_top_banner");
$topBannerCode = get_option(THEME_NAME."_top_banner_code");
//fixed menu
$menuStyle = get_option(THEME_NAME."_menu_style");
$weatherSet = get_option(THEME_NAME."_weather");
$weather = OT_weather_forecast($_SERVER['REMOTE_ADDR']);
// header social icons
$socialHeader = get_option(THEME_NAME."_social_header");


$vimeo = get_option(THEME_NAME."_vimeo");
$twitter = get_option(THEME_NAME."_twitter");
$facebook = get_option(THEME_NAME."_facebook");
$googlepluss = get_option(THEME_NAME."_googlepluss");
$pinterest = get_option(THEME_NAME."_pinterest");
$tumblr = get_option(THEME_NAME."_tumblr");
$linkedin = get_option(THEME_NAME."_linkedin");
$dribbble = get_option(THEME_NAME."_dribbble");
$soundcloud = get_option(THEME_NAME."_soundcloud");

?>
    <!-- BEGIN .boxed -->
    <div class="boxed<?php echo $page_layout=="boxed" ? " active" : false; ?>">

        <!-- BEGIN .header -->
        <div class="header">

            <!-- BEGIN .header-very-top -->
            <div class="header-very-top">

                <!-- BEGIN .wrapper -->
                <div class="wrapper">

                    <div class="left">
                        <?php

                            if ( function_exists( 'register_nav_menus' )) {
                                $walker = new OT_Walker_Top;
                                $args = array(
                                    'container' => '',
                                    'theme_location' => 'top-menu',
                                    'items_wrap' => '<ul class="ot-menu very-top-menu load-responsive" rel="'.__("Top Menu", THEME_NAME).'"><li><a href="'.home_url().'" class="icon-text"><i class="fa fa-home"></i></a></li>%3$s</ul>',
                                    'depth' => 3,
                                    'walker' => $walker,
                                    "echo" => false
                                );


                                if(has_nav_menu('top-menu')) {
                                    echo wp_nav_menu($args);        
                                }       

                            }   

                        ?>

                    </div>

                    <?php if($weatherSet=="on") { ?>
                            <?php if(!isset($weather['error'])) { ?>
                                <div class="right">
                                    <div class="weather-report">
                                        <span><?php _e("Weather",THEME_NAME);?></span>
                                        <b><?php echo $weather['country'].', '.$weather['city'];?></b>
                                        <img src="<?php echo THEME_IMAGE_URL.$weather['image'];?>.png" alt="<?php echo $weather['country'].', '.$weather['city'];?>" />

                                        <font class="weather-meter" style="background: <?php echo $weather['color'];?>;"><?php echo $weather['temp_'.get_option(THEME_NAME."_temperature")];?></font>

                                    </div>
                                </div>
                            <?php 
                                } else { 
                                    echo $weather['error'];
                                } 
                            ?>
                        <?php } ?>

                    <div class="clear-float"></div>

                </div>
                <div class="double-split"></div>
            <!-- END .header-very-top -->
            </div>

            <!-- BEGIN .header-middle -->
            <div class="header-middle">
                <div class="wrapper">
                    <?php if($logo) { ?>
                        <div class="logo-image">
                            <h1><?php bloginfo('name'); ?></h1>
                            <a href="<?php echo home_url(); ?>"><img class="logo" src="<?php echo $logo;?>" alt="<?php bloginfo('name'); ?>" /></a>
                        </div>
                    <?php } else { ?>
                        <div class="logo-text">
                            <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
                        </div>
                    <?php } ?>

                    <?php if($topBanner=="on") { ?>

                        <div class="banner">
                            <div class="banner-block">
                                <?php echo stripslashes(do_shortcode($topBannerCode));?>
                            </div>

                            <?php if (is_pagetemplate_active("template-contact.php")) { ?>
                            <?php $contactID = ot_get_page('contact'); ?>
                                <div class="banner-info">
                                    <a href="<?php echo get_page_link($contactID[0]);?>" class="sponsored"><span class="icon-default">&nbsp;</span><?php _e("Sponsored Advert", THEME_NAME);?><span class="icon-default">&nbsp;</span></a>
                                </div>
                            <?php } ?>
                        </div>

                    <?php } ?>

                    <div class="clear-float"></div>

                </div>
            <!-- END .header-middle -->
            </div>

            <!-- BEGIN .header-menu -->
            <div class="header-menu<?php if($menuStyle=='on') { echo ' thisisfixed'; } ?>">
                <div class="wrapper">
                    <?php   

                        wp_reset_query();
                        if ( function_exists( 'register_nav_menus' )) {
                            $walker = new OT_Walker;
                            $args = array(
                                'container' => '',
                                'theme_location' => 'middle-menu',
                                'items_wrap' => '<ul class="%2$s main-menu" >%3$s</ul>',
                                'depth' => 3,
                                "echo" => false,
                                'walker' => $walker
                            );


                            if(has_nav_menu('middle-menu')) {
                                echo wp_nav_menu($args);        
                            } else {
                                echo "<ul class=\"main-menu\"><li class=\"navi-none\"><a href=\"".admin_url("nav-menus.php") ."\">Please set up ".THEME_FULL_NAME." menu!</a></li></ul>";
                            }       

                        }
                    ?>

                    <?php if($search=="on") { ?>
                        <div class="right menu-search">
                            <form method="get" action="<?php echo home_url(); ?>" name="searchform" >
                                <input type="text" value="" placeholder="<?php _e("Search something..",THEME_NAME);?>" name="s" id="s"/>
                                <input type="submit" class="search-button" value="&nbsp;" />
                            </form>
                        </div>
                    <?php } ?>

                    <div class="clear-float"></div>

                </div>
            <!-- END .header-menu -->
            </div>

            <!-- BEGIN .header-undermenu -->
            <div class="header-undermenu">
                <div class="wrapper">
                        <?php

                            if ( function_exists( 'register_nav_menus' )) {
                                $args = array(
                                    'container' => '',
                                    'theme_location' => 'third-menu',
                                    "link_before" => '<i>',
                                    "link_after" => '</i>' ,
                                    'items_wrap' => '<ul class="secondary-menu" >%3$s</ul>',
                                    'depth' => 1,
                                    "echo" => false
                                );


                                if(has_nav_menu('third-menu')) {
                                    echo wp_nav_menu($args);        
                                }       

                            }   

                        ?>

                    <div class="clear-float"></div>

                </div>
            <!-- END .header-undermenu -->
            </div>

        <!-- END .header -->
        </div>

 <?php wp_reset_query(); ?>
  <div style="text-align: center; margin: 0 auto;"><!-- Test_WGD -->
  <div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px;'>
   <script type='text/javascript'>
   googletag.cmd.push(function() { googletag.display('div-gpt-ad-1419519536676-0'); });
   </script></div>

   </html>

jmore009 · Accepted Answer · 2014-12-25T19:49:34.517

1

If you put your css on the page instead of linking to an external css file you should be putting it inside the <head></head> tags. Your document should look something like this:

<html>
   <head>
      <style type="text/css">
         .center {
             text-align: center;
             margin: 0 auto;
         }
      </style>
   </head>

   <body>
      <div class="center">AD CODE</div>
   </body>
</html>

you can also use inline styling (which I would not recommend) if you wanted the styles near the div like your example:

<div style="text-align: center; margin: 0 auto;">AD CODE</div>

UPDATE

This is being pulled in from an iframe. What you need to do is find the id that I have pointed out in the below image:

enter image description here

Which is this:

 <div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px;'>

and add margin: auto to it, like so:

 <div id='div-gpt-ad-1419519536676-0' style='width:728px; height:90px; margin: auto;'>

That should center your image

edited Dec 25 '14 at 19:49

answered Dec 25 '14 at 19:12

jmore009

12,863
1
19
34

Thanx for the help. This centres the rest of the text on the website, but the ad remains on the left side ;) – Greenmachine Dec 25 '14 at 19:24
@Greenmachine you're going to have to post more code, a fiddle, or a link. There is no way to tell what's going on from what you provided. UPDATE - I see your link, thanks. So which ad are you talking about? – jmore009 Dec 25 '14 at 19:29
@jmore009 Isn't a width necessary for `margin:0 auto` to work properly? – Brian Dec 25 '14 at 19:32
@jmore009 I've just included a link to the website. http://worldgreendaily.com/ – Greenmachine Dec 25 '14 at 19:32
@Greenmachine Yep great, thanks. Which ad are you talking about? – jmore009 Dec 25 '14 at 19:34
@jmore009 The horizontal one on the left – Greenmachine Dec 25 '14 at 19:35
@BrianBennett Yep, correct. That wouldn't do anything. If you're wondering why it's there, I'm simply adding all of the code OP had in their question. – jmore009 Dec 25 '14 at 19:35
@jmore009 That did the trick! Very much obliged. Any requests on how to thank you? – Greenmachine Dec 25 '14 at 20:20
@Greenmachine glad to help, nope don't worry about it. Just click the check mark under the up/down votes to mark this as resolved when you get a chance. – jmore009 Dec 25 '14 at 20:51

score 0 · Answer 2 · answered Dec 25 '14 at 19:12

0

div and style tags must be replaced.

<html>
<head>
<style type="text/css">
.center {
    text-align: center;
    margin: 0 auto;
}
</style>
</head>
<body>
<div class="center"> 
AD CODE

</div>
</body>
</html>

answered Dec 25 '14 at 19:12

manowar_manowar

1,215
2
16
32

Centre a doubleclick ad

2 Answers2