Positioned in the center of the screen is an IFrame that is centered inside a div

How can I center an iframe inside a div in the middle of the screen? I've tried adding margin: 0 auto to #iframe but it didn't work. What am I missing here? Any help would be appreciated.

<head>
    <title></title>
    <link href="menu.css" rel="stylesheet" type="text/css" />
    <script src="script/jquery-1.11.1.min.js"></script>
      
    <style>

        
        #div1{
            margin-left:auto; 
            margin-right:auto;
            overflow-x: hidden;
            width:100%;
            height:1000px;
          
            }


     #iframe{
        width: 60%;
        height: 1000px; 
        background: #FFFFFF;
       
       
    }
 
    </style>

</head>
<body>

    <div style="margin-left:auto;margin-right:auto">
      
           <ul class="dropdown">
            <li class="drop">
                <a href="#">About us</a>

            </li>
            <li class="drop">
                <a href="#">Contact us</a>

            </li>
            <li class="drop">
                <a href="#">Services</a>

            </li>
            <li>
                <a href="#">Address</a>
            </li>
        </ul>

    </div>
    <div style="width:auto;margin:0 auto;">
        <div id="div1">
            <iframe id="iframe" scrolling="auto" align="middle" frameborder="0" onload="window.scrollTo(0, 0)" src="http://www.myhotels24.eu/fibe.aspx?hid=10000&chid=0&rate=IBE&css=brown" allowtransparency="true"></iframe>
        </div>
    </div>
</body>

javascripthtmlcssiframe

Answer №1

Knowing that the width of #iframe is 60%, you can easily center it by setting the margins to 20%.

#div1 {
  overflow-x: hidden;
  width: 100%;
  height: 1000px;
}
#iframe {
  width: 60%;
  height: 1000px;
  background: #FFFFFF;
  margin: 0 20%;
}
<head>
  <title></title>
  <link href="menu.css" rel="stylesheet" type="text/css" />
  <script src="script/jquery-1.11.1.min.js"></script>
</head>

<body>

  <div style="margin-left:auto;margin-right:auto">

    <ul class="dropdown">
      <li class="drop">
        <a href="#">About us</a>

      </li>
      <li class="drop">
        <a href="#">Contact us</a>

      </li>
      <li class="drop">
        <a href="#">Services</a>

      </li>
      <li>
        <a href="#">Address</a>
      </li>
    </ul>

  </div>
  <div style="width:auto;margin:0 auto;">
    <div id="div1">
      <iframe id="iframe" scrolling="auto" align="middle" frameborder="0" onload="window.scrollTo(0, 0)" src="http://www.myhotels24.eu/fibe.aspx?hid=10000&chid=0&rate=IBE&css=brown" allowtransparency="true"></iframe>
    </div>
  </div>
</body>

Answer №2

If you nest that div within another div, set the outer div's width to 100% with a relative position, and then give the inner div a relative position and margins set to auto;

#outterDiv {
  width: 100%;
  position: relative;
}
#innerDiv {
  width: 60%;
  height: 400px;
  background: #FFFFFF;
  margin: auto;
  border: 1px solid #CCC;
}
#iframe {
  width: 100%;
  height: 100%;
}
<div style="margin-left:auto;margin-right:auto">

  <ul class="dropdown">
    <li class="drop">
      <a href="#">About us</a>

    </li>
    <li class="drop">
      <a href="#">Contact us</a>

    </li>
    <li class="drop">
      <a href="#">Services</a>

    </li>
    <li>
      <a href="#">Address</a>
    </li>
  </ul>

</div>
<div id="outterDiv">
  <div id="innerDiv">
    <iframe id="iframe" scrolling="auto" align="middle" frameborder="0" onload="window.scrollTo(0, 0)" src="http://www.myhotels24.eu/fibe.aspx?hid=10000&chid=0&rate=IBE&css=brown" allowtransparency="true"></iframe>
  </div>
</div>

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

When does the ng-disable function become activated?

Here's an example: <button ng-disabled="!isSomethingValid() || loading || disabled" ... class="btn btn-primary"> What determines the condition for the ng-disable attribute to evaluate its expression? ...

javascriptangularjs

The HTML retrieved cannot be accessed by external JavaScript code

I've encountered a major issue. I'm using ajax to retrieve content in HTML format, but my main JavaScript file is unable to manipulate any retrieved elements - tags, classes, IDs, you name it. Is this normal? How can I work with the data once it& ...

jqueryhtml

What are some ways to showcase HTML/CSS content within an email?

For my service to be used, an activation process is necessary before the account can be accessed. The challenge we are facing is that the CSS styling we added to the activation email template is not showing up when the email is sent. Only the HTML content ...

phphtmlcssemailphpmailer

The JQuery code restricts the use of multiple buttons within a single instance

UPDATE I am facing an issue where I am trying to add the same set of buttons inside multiple divs, however, it seems that the button set only appears in one div at a time. I want the button set to show up in every location where I place it. Here is the co ...

jquerycssclassbutton

Strange issue encountered with Ember controllers

I am currently using Ember Cli version: 0.2.3 Exploring Ember for the first time and experimenting with a simple app. This is what I have in my templates/about.hbs <h1>About</h1> <p>Adding something interesting here</p> <but ...

javascriptember.jsember-cli

Displaying a div when an ng-repeat directive is devoid of content, incorporating filters in AngularJS

Currently, I am in need of a solution to display a specific div when my ng-repeat list is empty. The scenario involves a list containing various types of ice cream (with search filter functionality). What I aim to achieve is showing a designated div when t ...

javascriptangularjsionic-framework

Creating a dynamic header in a Bootstrap4 datatable with scroll search and pagination functionality

I've been attempting to create a Datatable using JSON Data with a dynamic header instead of a static one, but I haven't had much success. I want to display the table within a div element only, rather than using the traditional table tag, as it lo ...

javascriptjquerydatatablebootstrap-4

Angular directives are not triggering window level events as anticipated

This code snippet might be a bit confusing. Take a look at the code below: //html <div id="test1" test></div> <div id="test2" test></div> //module var myApp = angular.module(&ap ...

javascriptangularjsdom-events

Customize the appearance of the date input box in MUI KeyboardDatePicker

Currently, I am attempting to customize the appearance of the KeyboardDatePicker component including board color, size, font, and padding. However, none of the methods I have tried seem to be effective. Here is what I have attempted so far: 1 . Utilizing ...

cssreactjsdatematerial-uistyles

Is it possible to design a Controller and View that can manage the creation of one-to-many objects, specifically a single "container" object along with an unlimited number of "content"

One of the functionalities for users on the website will be the ability to create documents made up of chapters in a one-to-many relationship. Traditionally, this would involve creating separate views for chapter and document creation. How can I develop ...

javascriptajaxmodel-view-controllerspring-mvcone-to-many

Guide on converting a date input to a timestamp

I am trying to convert the date retrieved from an HTML5 date input into a timestamp and store it as a variable. HTML: <form> <section class="input"> <input type="date" id="date" name="maintenanace_date"/> </section> <sectio ...

javascripthtml

Is there a way to adjust the quantity individually, both increasing and decreasing as needed?

I am currently working on implementing a shopping cart feature using pure JS that allows users to increase and decrease the quantity of items. When the + or - button is clicked, both items in the shopping cart will be affected simultaneously if there are 2 ...

javascriptjson

Securing HTML pages with ASP.NET MVC authentication

Within my MVC application, there are a few static (pure html) pages that require authentication to prevent unauthorized access. Is there a method to achieve this without transferring all the code to asp files and incorporating a controller, which would t ...

asp.nethtmlauthentication

Enhancing div elements with Bootstrap 3 scroll effects

I have a web design project that involves using Bootstrap 3, and I need guidance on how to achieve a specific layout in the correct way: The layout in question consists of two divs that cover 100% of the screen at any given time. The first div needs to re ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

What steps should I take to ensure this image automatically refreshes once it has been uploaded?

I have granted permission for administrative staff on our ASP.NET website to upload their profile pictures. The process is simple: just use basic file uploading controls: <img src="<%#ImageFile%>" border='0' width="150" alt="" height="1 ...

htmlfile-upload

Troubleshooting: Issue with detecting keypress using jQuery

Currently, I have a jQuery script that checks password strength and changes an image source based on complexity. The functionality works smoothly within jsFiddle (set to jQuery 1.91), but when implemented on my webpage, the event seems to not be triggered. ...

javascriptjqueryhtml

Is there a way to use a jQuery puff effect that will automatically bring the Div back to its original state after

I'm currently implementing the jQuery puff effect and I need assistance with bringing the Div back onto the page after it has been puffed away! Right now, the code causes the Div to completely disappear (essentially making it puff away). How can I p ...

javascriptjqueryhtml

Generate an Array reference using the index of elements instead of duplicating the values

When initializing b, it appears that the array data is being copied from a instead of referencing it, as originally intended: let a = [0,1]; let b = [a[0], 2]; a[0]=3; console.log(b); The resulting output is 0,2. What is the reason for the output not ...

javascriptarraysreference

potential issues with memory leakage and browser crashes in three.js

Currently working on an app that features a spherical panorama photo with a jpg size of around 4Mb. Throughout the development process, I find myself constantly refreshing the page to see changes and browsing through various three.js example pages for insp ...

javascriptmemory-leaksthree.js

Having trouble with sending an AJAX request to a different domain?

I've been attempting to utilize the following API: However, upon making an AJAX call, I encounter this specific error: XMLHttpRequest cannot load /radius.json/30341/10/mile. No 'Access-Control-Allow-Origin' header is present on ...

javascriptjqueryajax