Menu
This piece of code effectively centers the iframes but on their left edge not their center.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Videos</title>
<style>
div.center {
width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body style="background: lightblue">
<div class="center">
<iframe src="http://www.youtube.com/embed/dgZ-K87NcwQ"></iframe>
<p />
<iframe src="http://www.dailymotion.com/embed/video/xoy7jd"></iframe>
</div>
</body>
</html>
I've seen these questions :
Unfortunately none worked for me.
How would one really center these on the screen ?
929
The issue is that your iframes are wider than 200px (the fixed width you've defined for their centered containing div). This will cause their excess width to spill over the right boundry of the div.
Depending on the full structure of your site try putting the auto margin directly on the iframes.
div.center iframe{
display: block;
margin-left: auto;
margin-right: auto;
}
Demo: http://jsfiddle.net/NvfKu/
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
