How to align vertically?

Question

All that I want to be able to do is take the tag and vertically align it with the page. I do not know if I have to put the tag inside another tag in order to work. Any help would be greatly appreciated. Thanks in advance!

CODE

<!DOCTYPE html>
<html lang=en-US>
<head>
<title></title>
<style type="text/css">

iframe {
    margin: 0 auto;
    display: block;
    border: 1px solid #ccc;
}

</style>
</head>

<body>
<iframe width="800" height="500"">

</iframe>

</body>
</html>

muiiu · Accepted Answer

Here you go.

http://jsfiddle.net/UFMP7/1/

The trick is to play with the margin and the top offset properties of the nested element.

In this case, given a parent div (A) of 300px, I've offset the nested div (B) by 50% of 300, which is 150. So B is positioned 150px down from the top of the A container. However, we aren't finished. In order to get the center of B to match the center of A, we are required to apply the negative 50% of B's height to the margin-top property. This centers it and the math checks out.

It's even easier if you know the dimensions of everything in pixels.

Feel free to change the A width or height. It'll center dynamically.

div#a
{
    width: 300px;
    height: 300px;
    border-width:1px;
    border-style: solid;

    /* important stuff below */
    display: inline-block;  
}

div#b
{
    width: 60px;
    height: 60px;
    background-color: red;

    /* important stuff below */
    position: relative;
    margin: -30px auto 0 auto;
    top: 50%;  
}

As such, I'd suggest wrapping your iframe in a div. It gives you a bit more control. Then again, I'm one of those excessive div wrappers...

How to align <iframe> vertically?

Tags:

html

css

user2865400

1 Answers

muiiu

Recent Activity

Donate For Us