0

I have a youtube video that I would like to center in a div. I have added

display: block;

to the css as suggested here How to center an iframe horizontally? and it does center it correctly. However, I have two images I would like to display inline next to the iframe, one to left and one to the right. The problem of course is that when I set display: block in the iframe, it prevents the images from being placed to the left and right of the picture.

here is 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>

here is 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;
}



How can I make the iframe centered while also keeping the inline behavior of the images?

Community
  • 1
  • 1
secondbreakfast
  • 4,194
  • 5
  • 47
  • 101

1 Answers1

1

Link to 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>
Community
  • 1
  • 1
Gray Spectrum
  • 723
  • 2
  • 7
  • 21
  • I'm sorry, but this doesn't work for me in my project and does not appear to be working in your fiddle either. – secondbreakfast Jun 19 '14 at 18:31
  • I believe the reason it did not appear to be working for me in the fiddle was because of my small monitor size, I stretched the area a little and it seems like it works atleast on the left side, im sure it does on the right side too. However this still does not work in my code for some reason. I only posted code that I thought to be relevant to the post, but apparently something else must be causing it not to work so I will edit my post. Please review it and let me know what you think. Thanks! – secondbreakfast Jun 19 '14 at 18:39
  • Yeah, if it's not working in your project, then some other css property is interfering with it...I wouldn't know what without seeing it. – Gray Spectrum Jun 19 '14 at 18:40
  • Sorry that took so long, the editor was giving me a lot of trouble – secondbreakfast Jun 19 '14 at 18:56
  • You're going to have to throw this into a jsfiddle for me. When you're done, click SAVE. Then you'll see a new button called SHARE. Click that and copy the first URL and leave it back here in the comments. – Gray Spectrum Jun 19 '14 at 19:00
  • It is not behaving exactly the same on the fiddle, but here ya go http://jsfiddle.net/Xt363/ Thank you – secondbreakfast Jun 19 '14 at 19:11
  • I cleaned up the code a little, but it seems to be working fine for me. The video is centered and the images stick to each side of it. – Gray Spectrum Jun 19 '14 at 19:19
  • It is strange that it is centered for you and not me. I didnt want to update the site until I got this right but I went ahead and did it just to show you what I mean. See how the video is not centered with everything else? http://www.hotcarlanddirtysanchez.com/ – secondbreakfast Jun 19 '14 at 19:30
  • It's true that doing that makes it appear to be centered, and possibly even does center it. The problem is that this is what I actually was doing and wanted to move away from doing it, as it is not an exact science and might get messed up if the size of pictures changes, pictures get removed, etc. Trying to figure out how to do it without specifying margins. – secondbreakfast Jun 19 '14 at 19:40
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/55938/discussion-between-gray-spectrum-and-unicodezero). – Gray Spectrum Jun 19 '14 at 20:16
  • Sorry, I must have logged off right before you sent this. Let me know when a good time to catch you would be and I'll do my best to log in for chat. Thanks!! – secondbreakfast Jun 19 '14 at 21:19