Tips for positioning an advertisement at the center of a full-screen HTML5 game

I am struggling to find a way to perfectly center my advertisement in a fullscreen HTML5 game. The game automatically expands to fullscreen when played, and I want the advertisement to always be positioned in the center, regardless of whether the game is being played on a tablet or a PC.

So, how can I achieve this centered placement for my advertisement?

Below is the code for my advertisement:

<div id="goog" style="position:absolute; left:0; top:10;">

<script type="text/javascript">
<!--
google_ad_client = "ca-pub-xxxxxxxxx";
google_ad_slot = "xxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

I have attempted to use

document.getElementById("goog").align = 'center';
, but unfortunately, it did not work as expected.

Answer №1

you may want to consider this approach

replace

<div id="goog" style="position:absolute; left:0; top:10;">

with

<div id="goog" style="position:absolute; left:50%; top:50%;margin-top:-125px;margin-left:-175px;width:350px;height:250px;">

OR

<style>
    #goog { position:absolute; left:50%; top:50%;margin-top:-125px;margin-left:-175px;width:350px;height:250px; }
</style>

and then insert the html

<div id="goog">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The functionality of displaying a loading image when the Upload button is clicked has encountered a glitch and

I am looking to add a feature that displays a loader when a user uploads a file by clicking on a button. The loader should be visible while the data is being processed in the background. To achieve this, I have included a div as shown below: <div id=" ...

Do we always need to use eval() when parsing JSON objects?

<!DOCTYPE html> <html> <body> <h2>Creating a JSON Object in JavaScript</h2> <p> Name: <span id="jname"></span><br /> Evaluated Name: <span id="evalname"></span><br /> <p> <s ...

Enhance User Experience with ngDialog Modal's Multi-pane Feature for Angular

Looking at the ngDialog example, they showcase a modal with multiple 'panes' that can be scrolled through: . After going through the ngDialog guide, I couldn't find a straightforward way to achieve this. Any suggestions on how to add a butt ...

I'm facing an issue with running npm start on my react project ever since I installed babel-cli

YTGJAI@DESKTOP-DOAIF41 MINGW64 ~/Desktop/LYNDA MERN/Exercise Files/Ch02/02_01/start/dist $ npm start [email protected] start c:\Users\mctumbaga\Desktop\LYNDA MERN\Exercise Files\Ch02\02_01\start httpster -d ...

Are you struggling with perplexing TypeScript error messages caused by a hyphen in the package name?

After creating a JavaScript/TypeScript library, my goal is for it to function as: A global variable when called from either JavaScript or TypeScript Accessible via RequireJS when called from either JavaScript or TypeScript Complete unit test coverage Th ...

Having issues sending multiple variables to PHP through Ajax

Trying to pass three variables through the URL using Ajax - one constant and two from a date picker. The constant passes fine, but the date variables are only passing as their names. Here's the code for the date pickers: <tr> ...

Using the flexslider to override CSS styles in an <li> element

I have implemented the flexslider by whoothemes on my responsive website to showcase tiles. However, I am facing an issue with setting a specific width for the tiles on various devices. Upon inspecting with Chrome, I see this code: <li style="width: 21 ...

Is it Necessary to Create a Separate Stylesheet for This, And if so, How Should it be Implemented? (Using PHP

Creating a customized WordPress options panel is an essential task. One of the key functionalities it offers is allowing users to select their preferred colors. To achieve this, I currently follow a method where I utilize a default stylesheet and then appl ...

What is the most effective way to toggle the visibility of these rows within a table?

Initially, my plan was to incorporate collapsible rows into my table. However, considering the spacing and margins, I realized that approach wouldn't work. After some thought, I concluded that all I really need is a way to hide and show information on ...

Displaying user input data in a separate component post form submission within Angular

I recently developed an employee center app with both form and details views. After submitting the form, the data entered should be displayed in the details view. To facilitate this data transfer, I created an EmployeeService to connect the form and detail ...

Achieving a layered effect with elements overlapping onto another div

Looking for a way to create a design where the text in id="text-field" overlaps with id="image-field". Need some guidance on how to achieve this effect. Any help is appreciated. <!DOCTYPE html> <html> <body> <div class=" ...

Tables inserted via ckeditor do not preserve the style attribute

After incorporating ckeditor into my web page along with the table plugin, I noticed that sometimes the width of tables created in the editor window extends beyond the boundaries of the webpage when displayed. To address this issue, I made some adjustments ...

Struggling to make `align-items="baseline"` function properly

I'm encountering an issue with alignment in my sandbox project. Specifically, I want the bottom of texts with different font sizes to be on the same y axis but I can't seem to figure out how to make it happen. Check out this picture to see exact ...

The effectiveness of a promise chain is consistent, even when the return statement is subject to conditions

After reorganizing this sequence, I am perplexed at how it continues to function regardless of a conditional return statement in one of the .then sections: function addList(name) { let listObj = {}; listObj.name = name; return nameExists(name) //returns a ...

What are the steps for incorporating a personalized background in Autodesk Forge?

Is it possible to set an image as the background? I am trying to achieve this but so far, I have only been able to do the following: viewer.setLightPreset(4); viewer.setQualityLevel(false, false); viewer.setGhosting(true); viewer.setGroundShadow(true); vi ...

The request for the specified URL is incorrect

When I send an axios request to an Express URL called "getstatus" in my local development environment, everything works fine. However, once the files are uploaded to a server, the URL path still contains "localhost." this.$axios.get('api/getstatus&ap ...

Utilizing middleware with express in the proper manner

Hello there! I'm just double-checking to see if I am using the correct method for implementing middleware in my simple express app. Specifically, I am trying to ensure that the email entered during registration is unique. Here's an example of wha ...

Having trouble aligning a div in the middle of a slick-slider item using flex styling

I've created a slick slider component in Vue, and I'm facing an issue with centering a circular div inside each of the slider items. Despite trying to align and justify center along with adding margin:auto for horizontal centering, I can't s ...

Is it possible to replicate an HTML table using JavaScript without including the headers?

Discover a JavaScript snippet in this stack overflow post that allows you to create a button for automatically selecting and copying a table to the clipboard. When pasting the data into an Excel template, my users prefer not to include the header informat ...

Construct a new array within a JavaScript constructor function

I have been working on setting up a constructor and trying to initialize an array inside the object that will be created. This specific array is meant to hold multiple objects. function Cluster3DObject(name){ this.name = name; ...