All geek questions in one place

Center iframe horizontally

This piece of code efficiently centers the iframe, but on its left edge is not its 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>

enter image description here

I saw the following questions:

Unfortunately, no one worked for me.

How would they really center them on the screen?

+4
source share
1 answer

The problem is that your frames have a width of more than 200 pixels (the fixed width that you defined for their centered, containing div). This will cause their excess width to spill over the right border of the div.

Depending on the full structure of your site, try placing automatic margins directly on frames.

 div.center iframe{ display: block; margin-left: auto; margin-right: auto; }

Demo: http://jsfiddle.net/NvfKu/

+12
source

Source: https://habr.com/ru/post/1486383/

More articles:


All Articles