How to align iframe element in table...
Craig Hardie
Registered User
12 posts
What is the best way to vertically align an iframe element (embedded Youtube video) within a table cell? Do I need to wrap it in a div element first? Which CSS descriptors do I use? Vertical-align and text-align don't seem to work.
SirAGE
Registered User
1,625 posts
Use margin to space it if you can not get Vertical-align or baseline to work. 
"An Apple doth not fall far from its tree, yet an orange does."
https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
David Sellers
Ambassador
426 posts
I have great success with the following:
So, if your iframe dimensions are 400px by say 250px, your css would look like this:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
So, if your iframe dimensions are 400px by say 250px, your css would look like this:
.center {
width: 400px;
height: 250px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -125px;
}
width: 400px;
height: 250px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -125px;
}
Let's not get all hurt.
Craig Hardie
Registered User
12 posts
Thanks but I don't think that will create the result I want. I have a table cell with text and the embedded video in it and I want the video to be positioned at the bottom of the cell regardless off the amount of text included.
Eric Rohloff
Senior Advisor
20,266 posts
Online Now
It sounds like your trying to do what I did on a page. This code will position the iframe over the area in the embedded page where you need it. Just tweak the numbers until it shows what you need.
CSS
<style type="text/css">
<!--
#main{
width:725px;
height:455px;
border:1px solid #000;
overflow:hidden;
margin:auto;
}
#main iframe {
width:950px;
height:1000px;
margin-left:-218px;
margin-top:-525px;
border:0 solid;
}
-->
</style>
HTML
CSS
<style type="text/css">
<!--
#main{
width:725px;
height:455px;
border:1px solid #000;
overflow:hidden;
margin:auto;
}
#main iframe {
width:950px;
height:1000px;
margin-left:-218px;
margin-top:-525px;
border:0 solid;
}
-->
</style>
HTML
<div id="main">
<iframe src="http://www.mypage.com" scrolling="no"></iframe>
</div>
<iframe src="http://www.mypage.com" scrolling="no"></iframe>
</div>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
