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

Steps to incorporate the latest Material Design Bottom App Bar into your project

In our company, we are currently utilizing Vue and SCSS for constructing our latest Progressive Web Application. Depending on specific conditions relating to the user's profile, we need to switch out the left drawer with a Bottom App Bar. Although we ...

cssvue.jssassmaterial-designvue-material

This webpage is optimized for all browsers, with the exception of the Android Browser that may display fonts with larger sizes

When developing my webpage, I made sure it was compatible with all major browsers and even optimized it for mobile browsers. However, I overlooked testing the page on Android browser (specifically Android 4.2) and encountered some issues. The viewport set ...

androidhtmlcssfonts

Is there a way to customize CKEditor to prevent it from continuously adding <p></p> tags within the textarea automatically?

As I was going through the CKEditor tutorial, I implemented the following: $( '#editor' ).ckeditor(function(){}); //it's working great!! However, after submitting the form, I noticed that by default, the textarea displays <p></p ...

javascripthtmlcssckeditor

"Upon loading the page, I encounter JavaScript errors related to Angular's ngOnInit function. However, despite these errors,

I have a page in angular where I am loading data in the ngOnInit function. The data loads correctly and is displayed on the page, everything seems to be working fine. However, I am encountering numerous javascript errors in the console stating cannot read ...

javascripthtmlasp.netangularconsole

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Having trouble with my Bootstrap 4 Navbar menu implementation. When I add more items, they overflow the container instead of floating correctly. Any CSS suggestions to temporarily fix this issue? <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapnavbar

Expanding the padding of the selected item to create more breathing room

Upon examining the following: https://jsfiddle.net/h8kmove5/27/ Let's say you select 9 at the bottom. The display shows 8 9 10. My intention is to create some additional space on either side of 9, or any other active item for that matter. This way, ...

javascriptjqueryhtmlcssowl-carousel

Adding a CSS style to a specific child element

Here is an example snippet <html> <head> <style> .test > input { //this selector is incorrect. color:red; } </style> </head> <body> <div class="test"> <di ...

htmlcss

Overlay displayed on top of a single div element

Trying to implement a loading overlay in an Angular project within a specific div rather than covering the entire page. Here's a Fiddle illustrating my current progress: #loader-wrapper { top: 0; left: 0; width: 100%; height: 100%; ...

htmlcss

Display completed survey

I am in the process of developing a mobile app that allows users to answer questions in a questionnaire. Once the questionnaire is completed, the user can save it in LocalStorage. Upon revisiting the page, the user will see all previously answered question ...

htmlangularionic-framework

Error: The EJS compiler encountered a SyntaxError due to an unexpected token || in the show component file located at /var/www/html

I'm currently working on a project inspired by Colt Steele's YelpCamp creation during his Udemy Web Dev Bootcamp. Everything was going smoothly until I tried to refactor some code towards the end of the course using YouTube tutorials. Now, whenev ...

javascripthtmlnode.jsexpress

Tips for managing an event using the bxSlider callback API

I am currently using bxSlider to create a slideshow on my website. However, I now want to implement a manually controlled slideshow that also displays text content related to each image below the slideshow: Here is the code I have so far: <!--SlideSho ...

javascriptjqueryhtmlsliderbxslider

Enhancing collapsible list headers in jquery mobile with checkboxes

Having trouble with a jQuery Mobile website issue. Currently working on a jQuery mobile site that includes a collapsible list (). The client request is to have a checkbox inside the header, allowing users to check items off without needing to open them. T ...

javascriptjquerycssjquery-mobilemobile

Pattern to locate a CSS class identifier

I've been working on creating a regex to match valid CSS class name structures. Currently, my progress looks like this: $pattern = "([A-Za-z]*\.[A-Za-z]+\s*{)"; $regex = preg_match_all($pattern, $html, $matches); However, there are certai ...

phpcssregex

Showcasing a JSON attribute in the title using AngularJS

I'm struggling to display the Title of a table. Here is where I click to open a "modal" with the details: <td><a href="#" ng-click="show_project(z.project_id)">{{z.project}}</a></td> This is the modal that opens up with det ...

javascripthtmlangularjsjson

The line breaks in elements occur when the combined widths add up to 100%

Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%? I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines. How can I solve ...

css

JavaScript Slider for Color Selection

In my slider, I have added a .images class along with buttons for previous and next. To set the colors, I have used JavaScript to define an array like this: let colors = ['red', 'green',]; Currently, clicking the next-button displays ...

javascripthtmlcssslideraddeventlistener

Activate Google Map marker through an external click

I need help with implementing anchor buttons for different locations that highlight the location details on click. For example, when clicking on "location1" button, I want to highlight location1 on Google Maps. Check out the demo on JSFiddle google.maps.e ...

jqueryhtmlgoogle-mapsgeolocationmarker

Expanding DIV to cover entire width of screen

Allow me to explain my current predicament: In the following code snippet, I have a simple div element. However, upon running the code, I am presented with a gray box that does not span across the entire browser window as I had intended. Instead, it appea ...

csswidthhtml

Implementing Pagination or Infinite Scroll to Instagram Feed

Currently, I am working on creating an Instagram feed for a fashion campaign where users can hashtag their photos with a specific tag. Using the Instagram API, the script will pull all recent posts with this common tag to display on the webpage. Instagram ...

javascripthtmlajaxpaginationinstagram

What methods can be used to choose specific rows while styling columns with CSS?

As an exercise in CSS styling, I have successfully transformed an unordered list into columns. But now, I am curious if it is possible to target and style the "rows" within these columns. This is the CSS code currently in use: ul.popular{ margin:15px ...

css