How can I center a Google Doc that is embedded horizontally?

I recently started diving into the world of coding with HTML and CSS, utilizing resources like HTML for dummies to learn.

One question that came up is how to center an embedded Google Doc horizontally on a webpage.

div#iframe-wrapper iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  right: 100px;
  height: 100%;
  width: 100%;
}
<body bgcolor="#414141">
  <title>Rules Page</title>
  <div class="center">
    <iframe width='85%' height='100%' src="https://docs.google.com/document/d/1G1xhqhSK2Ge8diyXELZ3cNvFJj-5wK-0_1VMjCfQR_I/pub?embedded=true">    </iframe>
  </div>
</body>

htmlcssiframe

Answer №1

Here is a method you can use:

.center iframe {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body bgcolor="#414141">
<title>Rules Page</title>
    <div class="center">
        <iframe width='85%' height='100%' src="https://docs.google.com/document/d/1G1xhqhSK2Ge8diyXELZ3cNvFJj-5wK-0_1VMjCfQR_I/pub?embedded=true"></iframe>
    </div>
</body>

Answer №2

This task cannot be accomplished.

The IFRAME element has a predetermined width, and access to the body is restricted by CORS policies.

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

Issue with CSS floating and wrapping

I'm having some trouble explaining this concept clearly, but I'm attempting to achieve a layout where elements wrap around a block. Here is an illustration of what I mean: The issue lies with the code provided below. It aligns correctly when th ...

css

Tips for refreshing jQuery to ensure it functions smoothly for subsequent tasks

I am facing an issue with running a second process under JQuery, as shown in the code snippet below: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <script type=" ...

javascriptjqueryhtmlajax

Is there a way to calculate the upload ratio for a file upload progress bar without using a plugin or pre-made solution

Can someone provide guidance on how to create a file upload using iframe with an ajax effect? I am specifically looking for a way to track the uploading progress. While there are many plugins available, I would appreciate some ideas or examples to achiev ...

asp.nethtmlajax

Tips for improving the focus of the bootstrap datetime picker?

I have integrated the Bootstrap datetime picker (bootstrap-datetimepicker.min.js) into my code. Within the DIV tag, I have included the class="modal fade" to open the first popup. In the first popup, there is a datetime picker. When clicking on the picker ...

jquerycss

Utilize the mailto function in HTML to dispatch an email

I am utilizing an Android hybrid app that includes a link for sending emails: <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcafb4aeb5b7bdb2a8b6bdb8b4bdaae4ea9cbbb1bdb5b0f2bfb3b1">[email protected]& ...

androidhtmlemail

What is the superior choice for developing a card game: creating it using SVG and the kinetic.js library or utilizing the oCanvas library

When it comes to creating a card game, which platform is more suitable: SVG or canvas using kinetic.js or oCanvas library? In terms of performance, event handling, and object tracking, which option would be more efficient? Additionally, if there is a bet ...

htmlhtml5-canvas

Tips for implementing Animation.css in Angular version 1.5.8

I have successfully added the ngAnimate dependency to my AngularJS project: var app=angular.module('testApp',['ngRoute', 'ngAnimate']); I have also included the animation classes in my animation.css file: .slide-animation.n ...

javascriptcssangularjsanimationcss-animations

Internet Explorer 9 successfully executing the getAttribute method

I am trying to set a custom attribute called titleDiv using the setAttribute method Here is an example of the HTML code: <div id="Object" titleDiv="blank"></div> This JavaScript code usually works, but it seems to have some issues with IE 9: ...

javascripthtmlcssinternet-explorer-9

What is the best way to prevent a function from running unnecessarily multiple times?

Whenever I click "About Me" multiple times, the jQuery animation stops as expected. However, if I click "My Portfolio", "Web", "Graphic", and "Others" more than once, the #box1 div keeps moving down endlessly. This might not be noticeable at first, but onc ...

javascriptjqueryhtmlcssweb

Navigating the process of implementing a change in product image upon hovering

I am in the process of creating a shopping cart that will feature product thumbnails displayed in a single column on the left side and a large main product image. When a user hovers over a thumbnail image, I want the main image to change to display the hov ...

jqueryhtmlcssasp.net-mvcjquery-plugins

Vue 3's Paged.js does not respond to requests for page breaks

Currently, I'm working on implementing page breaks in Vue.js 3. Despite my efforts and utilization of the specified CSS code, I am facing challenges with the ".page-break" class parameter. While I can successfully modify other elements like titlePage ...

htmlcssvue.jspagedjs

Square Power Box

I have been attempting to create two equal sections, one displaying an image and the other showing text, both maintaining a square shape with identical width and height. I am using the Avada theme on Wordpress along with Element Builder and custom CSS to a ...

csswordpress

Issue with Website Rendering: Safari 4 exhibits display glitch showing temporary content before showing a blank white screen

Currently, I'm in the process of developing a specialized rails application. However, there seems to be an unusual rendering error that has been reported by Safari 4 users. It's quite peculiar because the page appears briefly but quickly disappea ...

javascripthtmlruby-on-railscssuri

Discovering the amount of attributes possessed by an element with jQuery

If I have an xml element like this: <fruit color="blue" taste="sweet" shape="round"></fruit> Without using jQuery, I could use the following code: fruit.attributes.length How can I achieve the same result with jQuery? ...

javascriptjqueryhtmlxml

Adjust grid width dynamically according to the container

I am working with a grid made up of 32x32 slots. Link to Grid Image How can I dynamically add or remove grid slots to fill the element without cutting off halfway through a slot/tile? Below is the code snippet: <style> .drag-item { pos ...

htmlcss

Implementing a Radial Cursor with a Custom Background Image in JavaScript

I am attempting to implement a radial cursor on a website that features a background image. Currently, I am facing two main issues: The radial cursor works in Chrome but not in Firefox. When using Firefox, I encounter a parsing error related to the "bac ...

javascriptjqueryhtmlcsscursor

What are the steps to turn off the rule .MuiInputBase-inputType-121 in Material UI TextField for email input field because of a display problem?

Here is a snippet of JSX code: import TextField from '@material-ui/core/TextField/TextField'; <Col xs={6}> <TextField pattern=".{3,}" name="fullName" ...

javascripthtmlcssmaterial-uimui

Launch the modal and automatically navigate to a designated DIV

I am trying to open a modal window with a link and scroll to a specific DIV inside it. HTML: <a href="#teamMembers" data-toggle="modal" class="teamMemebrScroll1">read more</a> <a href="#teamMembers" data-toggle="modal" class="teamMemebrS ...

htmlcssmodal-dialogbootstrap-modal

Stop users from submitting empty forms

I'm facing an issue with my form where I want to prevent it from being submitted if the fields are blank and also highlight those blank fields. The code I currently have works when trying to submit with blank fields, but for some reason, it doesn&apos ...

javascripthtmlcssforms

What steps can be taken to transform example.com/blog.html into example.com/blog?

www.awesomenewgames.com/articles I need to change the URL of this page from ending with /articles to simply /blog. So the desired result should be: www.awesomenewgames.com/blog What steps do I need to take to make this change? Any guidance on this matte ...

htmlweburl