Is it possible to simultaneously center and display an iframe inline?

I have a YouTube video that I'm trying to center within a div. After adding

display: block;

to the CSS following advice from How to center an iframe horizontally?, it centers correctly, but now I want to display two images inline next to the iframe - one on the left and one on the right. The issue arises when setting the display property of the iframe to block, as it disrupts the layout for the images.

Here's the HTML:

<div class="content">

    <a id="logo" href="http://www.example.com"> 
        <img id="logo" src="img/logo.png" alt="logo">
    </a> 
    <br>

    <nav class="topNav">
        <a href="index.html">
            <img id="home" class="topNav" src="img/home.png" alt="home">
        </a>
        <a href="photos.html">
            <img id="photos" class="topNav" src="img/photos.png" alt="gallery">
        </a>
        <a href="about.html">
            <img id="about" class="topNav" src="img/about.png" alt="about">
        </a>
    </nav>
    <br> 

    <img id="image1" src="img/image1.png" alt="img1">
    <iframe id="video" src="http://www.youtube.com/embed/L-9y6jP-HO4"></iframe>
    <img id="image2" src="image2.png" alt="img2">

<br>

    <a id="downloadmp3" href="mp3/poo-on-the-shoe-ringtone.mp3" target="_blank" onmouseover="mOver()" onmouseout="mOut()">
        Download the ringtone! 
    </a>
    <br>

    <a href="https://www.facebook.com" target="_blank">
        <img id="facebookPic" src="img/facebook.png" alt="Like Us On Facebook"> 
    </a>

And here's the CSS:

body {
  background: #563C21;
  text-align: center;
}

.content {
  text-align: center;
  background-color: #4D361E;
  box-shadow: 0 0 150px black;
  border-radius: 15%;
}

#logo {
  margin: auto;
  text-decoration: none;
}  

.topNav {
  width: 210px;
  height: 50px;
  margin: auto;
  display: inline;
}

.topNav a {
  text-decoration: none;
 }

#video {
  width: 540px;
  height: 315px;
  display: block;
  margin: auto;
  border: 0;
}



Is there a way to center the iframe while maintaining the inline positioning of the images?

htmlcssiframe

Answer №1

Here is a link to an example: http://jsfiddle.net/BeEg9/

CSS:

 #video {
  width: 540px;
  height: 315px;
  margin: auto;
  border: 0;
  display: inline;
}

#image1, #image2 {
  height: 200px;
  display: inline;
}

.content {
  text-align: center;
  display: block;
}

HTML:

<div class="content">
    <img id="image1" src="img/image1.png" alt="img1" />
        <iframe id="video" src="http://www.youtube.com/embed/L-9y6jP-HO4">
        </iframe>
    <img id="image2" src="image2.png" alt="img2" />
</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

What is the best way to incorporate an external .css file into my Angular project by referencing its URL?

I'm managing a collection of CSS files online and I need to incorporate each one into my project based on its specific requirements. One component in particular is connected to different numerical IDs in the router. I am looking for a way to dynamica ...

cssangulartypescriptsass

Is there a way to automatically convert English numbers to Persian/Arabic as soon as a user types them into the input tag?

Currently, I am working with Vuejs and trying to hide the user's characters in an input tag and replace them with my own characters (specifically numbers). I have attempted using @onchange, Watch, as well as getters and setters within computed proper ...

javascripthtmlvue.js

I am looking to showcase a series of icons linked together by connecting lines

I have successfully designed the layout and added icons, but I am facing difficulty in creating connecting lines between them. I attempted to utilize CSS borders and pseudo-elements, yet I cannot achieve the desired outcome. If anyone could offer a CSS-ba ...

javascripthtmlcsscss-selectorsweb-frontend

If you want to retrieve the calculated value of a div using jQuery

I have a scenario where I have 3 list items (li) under an unordered list (ul). I am interested in finding the height of these list items, but without explicitly defining their height. So far, when inspecting with Firebug, I noticed that the computed height ...

javascriptjqueryhtmlheight

How should text inputs be positioned?

I'm not very experienced with forms, so I'm a bit confused about what's happening here. I'm attempting to position a text input inline with a button, but it doesn't seem to be working. You can view the code I'm using here: htt ...

htmlcssforms

What is the best way to alter the header in Django when a user is authenticated?

In my project, I have two headers: header.html and headersuccess.html. When a user is logged in, I need to change the header from header.html to headersuccess.html. How can I implement that? Here is an excerpt from my views.py file where I render loginsuc ...

javascriptpythonhtmldjangovue.js

What is the best way to position the wizard on both the left and right sides of the screen

Currently, here's the code I have, and I want it to appear like this. What are the steps needed to adjust the CSS in order to achieve that? .nav-wizard { display: table; width: 100%; } .nav-wizard > li { display: table-cell; text-align: ...

csstwitter-bootstraptwitter-bootstrap-3

Unable to find the element within an iframe using Selenium while searching for a dictionary definition

Just starting out with Selenium and trying to automate filling out a web form to retrieve results as a Python dictionary. Here's what I have so far: from selenium.webdriver.common.keys import Keys from time import sleep driver = webdriver.Chrome() dr ...

pythonseleniumxpathiframecss-selectors

Combine two CSS effects in succession using Jquery

I am attempting to combine two CSS transition effects together. The first code snippet works well with 'animate': $('.txt').css({'transition': 'transform .5s ease-in-out ', 'transform': 'translate(3 ...

jquerycss

Is there a way to use HTML and JS to draw custom lines connecting elements?

Sorry if this question has been asked before. Is there a way to create straight lines connecting HTML elements with just HTML and JavaScript, without relying on SVG or Canvas? If so, what would be the most effective approach? ...

javascripthtml

Maintaining a sticky footer that remains visible throughout the content as the screen is resized

For more information, please visit my website at I attempted to implement a "sticky footer" technique following the steps outlined in this tutorial (http://ryanfait.com/sticky-footer/) Unfortunately, the sticky footer does not function properly when resi ...

htmlcss

Tips for adding a CSS marker to the Videogular timeline at a designated time

My HTML player application allows users to search for a term and then displays the results along with the time when those words appear. By clicking on a specific sentence, the HTML player will start playing from that location. However, I would like to enha ...

javascripthtmlcssangularjsvideogular

The anchor link is not aligning properly due to the fluctuating page width

Seeking help to resolve an issue I'm facing. Maybe someone out there has a solution? The layout consists of a content area on the left (default width=70%) and a menu area on the right (default width=30%). When scrolling down, the content area expand ...

javascripthtmlcssscrollanchor

What are some methods for concealing custom CSS overflow in IE8?

In my latest project, I created a script that utilizes pure css to toggle between an image, image caption, and text. However, when testing it in IE8, all the elements appear at once instead of toggling as intended. To showcase the issue more clearly, I h ...

htmlcssinternet-explorer-8

What is the method for loading a subcategory based on the category by invoking a jQuery function within the <td> element of a JavaScript function that adds rows dynamically?

Whenever I click the add row button, the category dropdown list successfully loads. However, when I select an option from this category list, the subcategory does not load any list. The Javascript function responsible for adding rows dynamically is as fol ...

javascriptphpjqueryhtmlmysql

Link to toggle a CSS spoiler button

Currently, I have Ajax set up to replace the main div with a link. In addition, there's a spoiler-type navigation that allows you to hide or show the menu. I have my links inserted in this structure and am trying to figure out how to make it so that c ...

htmlcssajax

Strange image movement occurs when utilizing jQuery slideDown and slideUp

My HTML structure is as follows: <div class ='profileName'> <hr> <span class='name'>Content</span> </div> <div class ='profile'> <div class='floatRightImg padded'> < ...

jqueryhtml

Displaying the loading image only on the first result within a while loop

When a submit button is clicked on any result, the loading image below the button displays only for the first result in the while loop. For example, if I click the submit button on the first result, the loading image shows below it. However, when I click t ...

javascriptphpjqueryhtmlajax

Font modification is unsuccessful in Vue-Material

Here is a snippet from my App.vue file where I encountered an issue with changing the font in the md-tabs component, taken from . The CSS line: background: #42A5F5; works perfectly fine, but this one does not: color: #E3F2FD; App.vue: <template> ...

cssvue.jsvuejs2componentsvue-material

What is the best way to display a child component inside an iframe using Vue.js?

Looking to provide a live preview of an email before sending it out, I've opted to use an iframe to contain the preview and prevent style leaks. The goal is for the preview to update dynamically as the user fills out form details. How can I display a ...

javascriptvue.jsiframe