I have a div element enclosing an iframe, and I am trying to always position it in the center. Here is my attempt on jsfiddle: jsfiddle
I truly believe that someone could help because I am certain that it is something simple but I just can't figure it out.
Here is the HTML code:
<div id="top-element">Some div with greater width than the inner div</div>
<div id="iframe-wrapper">
<iframe src="http://www.apple.com/" scrolling="auto"></iframe>
</div>
Update: Using FLEX solution
To center the <iframe>, apply display: flex on the parent <div>
div {
display: flex;
align-items: center;
justify-content: center;
}
Check out the implementation on JSFiddle: https://jsfiddle.net/h9gTm/867/
Another approach:
div {
text-align: center;
width:100%;
}
div > iframe{
width: 200px;
}<div>
<iframe></iframe>
</div>See it in action on JSFiddle: https://jsfiddle.net/h9gTm/
edit: Added vertical alignment
div {
text-align: center;
width: 100%;
vertical-align: middle;
height: 100%;
display: table-cell;
}
div > iframe{
width: 200px;
}
div,
body,
html {
height: 100%;
width: 100%;
}
body{
display: table;
}
View this method on JSFiddle: https://jsfiddle.net/h9gTm/1/
Give this a shot:
#container {
text-align: center;
}
#container iframe {
display: inline-block;
}
By including margin: auto; in the CSS for the div below, it should function properly.
div#iframe-wrapper iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
margin: auto;
right: 100px;
height: 100%;
width: 100%;
}
If you simply want to showcase an iframe on a webpage without the need for divs or flex properties, here is a straightforward solution:
html {
width: 100%;
height: 100%;
display: table;
}
body {
text-align: center;
vertical-align: middle;
display: table-cell;
}
Then, your HTML code can be as simple as:
<html>
<body>
<iframe ...></iframe>
</body>
</html>
If displaying text content and other elements is all you require, you don't need additional wrapper divs. This method accommodates various types of content.
You may also find this reference helpful for even simpler implementations.
To align the content vertically, you can use display:table and for horizontal alignment, utilize text-align:center for your iframe. http://jsfiddle.net/EnmD6/7/
html {
display:table;
height:100%;
width:100%;
}
body {
display:table-cell;
vertical-align:middle;
}
#top-element {
position:absolute;
top:0;
left:0;
background:orange;
width:100%;
}
#iframe-wrapper {
text-align:center;
}
If you prefer a version using table-row, check http://jsfiddle.net/EnmD6/9/
html {
height:100%;
width:100%;
}
body {
display:table;
height:100%;
width:100%;
margin:0;
}
#top-element {
display:table-row;
background:orange;
width:100%;
}
#iframe-wrapper {
display:table-cell;
height:100%;
vertical-align:middle;
text-align:center;
}
To start, get rid of the position:absolute style within div#iframe-wrapper iframe, eliminate any position:fixed styles, along with any other existing CSS properties within div#iframe-wrapper
Next, implement the following CSS:
div#iframe-wrapper {
width: 200px;
height: 400px;
margin: 0 auto;
}
To center content using CSS, you can create a container and apply styling to it.
<style>
.container {
height: 75px;
position: relative;
border: none;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
Once you have added this code, place a div inside the iFrame to achieve the desired alignment:
<div class="container">
<div class="center">
<iframe src="embedded form link" width="600" height="300" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
</div>
Here is a very straightforward method using only HTML with no need for CSS or scripts.
<center>
<iframe> Insert your content here </iframe>
</center>
Another example involves framing your content in different positions within the center.
<center>
<iframe align="left|right|middle|top|bottom"> Your frame content goes here </iframe>
</center>
If you want to explore all the parameters available for iframes, check out an iframe generator here.
Currently, I have a function set up to open a modal dialog and populate it with information from the 'dblclicked' node: $(function(){ $(".delete").live('dblclick', function () { var id = $(this).attr('id'); ...
I am working on a small web application and I want to display 5 columns with equal width that are responsive. However, I only want this layout to be visible on devices with a width of ≥992px. For devices with a width <992px, I want the 5 HTML element ...
Is there a way to apply a simple class tag to a jeditable input field? The developer's instructions on their website () suggest using the following code snippet under "How to style elements?": $('.editable').editable('http://www.exampl ...
I have a table structured as follows: <tr> <td class="title">Title</td> <td class="body">Body</td> <td class="any">Any text</td> </tr> <tr> <td class="title">Title</td> ...
When clicking on the first or second value of the radio button, it selects the first option. Here is the HTML code: @supports(-webkit-appearance: none) or (-moz-appearance: none) { input[type='radio'], input[type='checkbox'] { ...
I am facing a challenge with an editable div that contains a span element which I would like to prevent users from deleting. My development environment is Vue3. Currently, if the user presses backspace while their cursor is to the right of the span or sel ...
I am working with AngularJS and have implemented the following code: <div > <input type="checkbox" ng-model="vehicleDetails.selfOwned"> Owned </div> <div> {{vehicleDetails.selfOwned}} </div> The mo ...
I have a specific requirement to showcase a lineup of elements in a single row, granting users the ability to scroll through them. Upon reaching the end of the scroll, a function should be triggered to add more elements to this lineup. I've successfu ...
I need assistance with implementing a toggle animation I found here: https://codepen.io/7harrypotterrr/pen/OrBwPY. I'm unsure how to apply it to my code and replace the current toggle button that is in use here: https://codepen.io/7harrypotterrr/pen/e ...
Is there a way to change the highlight class to an id, so that clicking outside the products will not trigger the highlight effect? I have added the window.onload section with my desired changes, but I am unsure how to switch the class highlight to an id. ...
Within my layout, there is a fixed div called #navigation that houses buttons. Alongside this, there is scrollable content in the form of .card elements. The #navigation div currently displays with a green background for demonstration purposes, as shown b ...
I am faced with a situation where I need to display different content in HTML based on the presence of a specific value ("sign_change_global") in a JSON loaded from a server. I believe this issue can be resolved within HTML only, but I also wonder if there ...
I'm trying to utilize richfaces for some fast AJAX widgets, but I am encountering difficulties in setting CSS parameters for them. After inspecting the generated code, I found that the elements have the classes "rf-ds" and "rpds". Despite applying st ...
I am working on creating a virtual keyboard using jQuery. Whenever I press 'a' in the textarea, I want it to display 'z' instead. In my investigation of typing a letter in the textarea, I discovered the following sequence: keyDown ev ...
Can you figure out what's wrong with the placement of content outside the <footer> tag in this HTML? Also, why is the text not perfectly vertically middle-aligned? <html> <head> <style> body { ...
screenshot of the page Hey there, I'm struggling to understand why this modal is displaying incorrectly. I copied the code from the bootstrap website. Here it is: <button type="button" class="btn btn-info btn-lg" (click)="showPerformedActivityMod ...
I'm currently in the process of developing a web application and I've implemented a navbar.html file as the layout for each page using the following code: eachpage.html : {% extends 'navbar.html' %} {% block body %} <div class=" ...
As a beginner in Javascript, I am facing an issue with a button that should open a 'window' when clicked. While it works for product 1 (chili oil), the same functionality is not working for product 2 (raspberry ratafia). Initially, the function ...
// JavaScript Document I'm attempting to make a popup appear in the browser only once. I believe using local storage is the key, but all I can find are solutions involving jQuery. I really want to achieve this using plain JavaScript without relying ...
After attempting to extract the LTP of a stock with the code below, I am not getting any value in return. Can you identify the error in the following code: from selenium import webdriver from bs4 import BeautifulSoup driver=webdriver.Chrome("C:&bsol ...