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>
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...
Use flex. It is more straight forward.
/* Here just for context */
html,
body,
.container {
width: 100%;
height: 100%;
}
/* This is whats needed */
.container {
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<iframe width="300" height="150" src="https://www.youtube.com/embed/V17ij5Ap1pA"></iframe>
</div>
if you need to center the iframe , giving a width to its selector should do the trick:
iframe {
margin: 0 auto;
display: block;
width: 800px;
border: 1px solid #ccc;
}
This is a poor way to do it, but it's the most compatible with all browsers. Other methods have their problems.
Create table that has height = 100% and one row with one cell in it.
Set the cell's style to vertical-align: middle; width: 800px; margin-right: auto; margin-left: auto;.
in stylesheet add
html, body{
height: 100%;
}
Once again, this is a bit of a bad way to do it, because you are using tables to organise visual layout, but it has benifits
simple
doesn't require HTML 5 on browser
compatible with pretty much every browser back to IE 5
doesn't need javascript
ammendment: make sure you specify min-width and min-height in body style to keep iFrame always visible.
This might work for you:
<table height="100%" width="100%">
<tr>
<td valign="middle" align="center">
<iframe width="800" height="500"></iframe>
</td>
</tr>
</table>
and in CSS
body{ height:100% }
Related
I'm trying to align a 'div' attribute to the center of the page (horizontally). The problem is that whatever attributes I've used, the 'div' continues to be aligned to left. The 'div' which I am reffering to, is the page 'div' of the webpage, which is inside the 'html' and the 'body' attributes. Here's the CSS code:
#page{
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right:auto;
border-color: black;
border-style: solid;
border-width: thin;
overflow:auto;
padding-bottom: 10px;
padding-top: 0px;
width:1200px;
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
color:black;
font-size:12px;
height:700px;
}
and the 'html', 'body' CSS code is the following:
html,body {
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
}
Note that if I remove the "overflow" property, the div is aligned to the center of the page (although, it overlays the menu which is on top of it) but I need the "overflow" property to automatically add scrollbars if the width/height of the page which would be displayed inside this div is greater than those specified in the CSS.
I haven't coded anything in awhile, however normally when I am creating a centered page:
html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }
Then for the div:
#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }
That may or may not work, like I said, it has been awhile.
In order to margin:auto works in your case is required to have a defined width/height for your main containers which are HTML and BODY
IMPORTANT:Both HTML and BODY elements must be ruled with the width/height properties
Do as follows
html,body {
background-color:#FFFFFF;
width:100%;
height:100%;
}
and watch this fiddle
It seems your div is filling full screen width. So center alignment will not have any visible effect on the div. Try to use a span instead.
Following will NOT work
<body style="text-align:center">
<div>Foo</div>
</body>
Following should work
<div style="text-align:center">
<span>Foo</span>
</body>
<div style="margin:0px auto;">sfsfsafafas</div>
Use this code surely it will make the div to center.
Simple:
HTML
<div id="page"></div>
CSS
#page {
width: 350px; height: 400px; border: 1px solid #000; margin: auto
}
jsFiddle example
You might also look at the "left" and "right" attributes for centering a if you are trying to center horizontally.
For instance, if your width was 60% of the page (width:60%), you could set (left:20%) and (right:20%) which MAY center it, however that depends on how your div is positioned. (position:absolute) or (position:relative).
(position:absolute) with the above width, left, and right should center horizontally.
There is also <center> enter code </center> within HTML that has worked for me in the past.
I'm not a guru with this though, so I don't know what "best practice" to use in your case.
I want to display an ASP.NET image in the middle of a div (both horizontally and vertically), how should I arrange my div and image (image should be runat=server), also I should set max-width and max-height styles for my image, DIV acts as a placeholder, and my image should be inside the DIV, and it should be exactly centered both horizontally and vertically, can you show my the correct HTML and CSS? is there any sample?
Use:
CSS
.placeholder{min-width:200px; min-height:200px;}
.placeholder img{
margin: 0px auto; /*centers element horizontally*/
vertical-align:middle; /*centers element vertically */
}
Your html should like something like:
<div class="container">
<div class="placeholder">
<!-- load image here -->
</div>
</div>
I worked REALLY HARD on finding the solution, hopeful it's 100% helpful :-)
<html>
<style>
.placeholder {
width: 250px;
min-width: 250px;
height: 250px;
min-height: 250px;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
top: 40%;
margin: -100px 0 0 -125px;
}
</style>
<IMG class="placeholder" src="http://www.swoo.co.uk/content/images/icons/stackoverflow.png">
</html>
Replace any img you want in place of the URL that equals to the "src".
Note that it works also while zoom in and zoom out in the browser, it stays EXACTLY in the MIDDLE of the page, best code you could find :)
Im just wondering if this is a browser rendering issue or incorrect css.
A nice way to scale a div in a defined aspect-ratio is, using a transparent image as a child element.
I have a small demo here. Under need this question.
But why doesn't it work nicely if I want a height of 100%.
I tested this in FF10, Safari 5.1.2, IE8 and IE9. (only ie8 seems to render correctly...)
Hope somebody can explain the problem and maybe come up with a solution.
Regards,
Rik
<!DOCTYPE html>
<html lang="uk">
<head>
<title>test</title>
<style>
html
, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: green;
}
/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */
.holder1 {
position: relative;
display: inline-block;
height: 100%;
width: auto;
background: yellow;
border-right: 1px solid red;
}
.holder1 .ratio {
display: block;
height: 100%;
width: auto;
}
/* AUTO HEIGHT - works fine */
.holder2 {
position: relative;
display: inline-block;
height: auto;
width: 100%;
background: yellow;
border-right: 1px solid red;
}
.holder2 .ratio {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<span class="holder1">
<img src="/images/empty_image.png" class="ratio" alt="Ratio image">
</span>
</body>
</html>
After view your question, I have some idea and suggest for your code:
1.Different between width:auto and width:100%, when you set auto for width, you leave the browser handle this width, with every different browser, they will handle width:auto follow their own rules. With width:100%, you force the browser must expand to have full width.That is what I think.
But for sure your div can expand 100% on every cross browsers, add css min-width:100%, it will do as you wish correctly.
2.About your CSS, I need you take a look at position:relative, this line of code have no sense, in this situation,
position:relative = position:static
when you use position:relative, you must describe where is the position you wish your element relative to, add top or left to do it.
Hope it can help you!
I want to make my table take up 80% of the screen, but right now its only the size of the content in the table.
#ecom-mainarea .center
{
margin-left: 10%;
position: relative;
width: 80%;
height: 80%; /* when this is 500px it works fine, but % doesn't work */
border: 1px solid;
border-bottom-color: teal;
border-top-color: gray;
border-left-color: gray;
border-right-color: teal;
background-color: white;
voice-family: "\"}\"";
voice-family: inherit;
vertical-align: text-top;
}
You need to make sure that the htmland body elements have 100% height. They need to stretch from top to bottom. If not the html and body element will just be as high as your table.
Here you have a working sample:
<!doctype html>
<html>
<head>
<title>Table height</title>
<style>
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
</style>
</head>
<body>
<table style="background: cyan; height: 80%;">
<tr>
<td>
Table has 80% of the height of the body
</td>
</tr>
</table>
</body>
</html>
Works fine so long as you specify a height of the parent element (in absolute units)
You can use a bit of a hack. It uses positioning. See: http://jsfiddle.net/minitech/2vRrZ/
(Also, if you ever need vertical centering for multiple lines - that's how it's done. My invention as far as I know)
If I recall, percent is not supported for CSS heights. Gotta resort to other methods.
As a design suggestion unless you really want to have it as a percentage I'd suggest a fixed size for the table so the layout looks the same on every computer no matter what their resolution is.
I want to set vertical alignment of image inside a div. I use img { vertical-align:middle}
but it is not working.
Using the line-height property will solve the problem:
<style>
.someclass {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
border: dotted;
}
.someclass img {
margin: auto;
vertical-align: middle;
}
</style>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
This is a solution that doesn't require JavaScript (as my previous solution did).
You can achieve what you want by assigning display: table-cell to the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit
I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cell value is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).
The CSS:
div#container {
width: 700px;
height: 400px;
position: relative;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
div#container img {
margin: 0 auto;
display: block;
}
You won't need the div#container img styles if you don't also want to horizontally align the image.
If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.
In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.
Here's a working example: http://jsbin.com/evuqo5/edit
Basic CSS is this:
#container { position: relative; }
#container img {
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
}
See this awser: How to vertical align image inside div
If you want to align horizontally also, add the right and left, like this:
div {
position:relative;
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
The following post has some useful references:
Text Alignment w/ IE9 in Standards-Mode
Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.
If you have to, use a one-row-one-cell table and take advantage of the vertical-align property. This is brute-force, not overly semantic, but it works.
If you set the div display attribute to table-cell then vertical-align: middle; will work.
The vertical-align rule only affects table cells or elements with display: table-cell.
See this article from SitePoint for a detailed explanation.
<style>
/* change body to .someClasses's parent */
body {
width: 100%;
height: 100%;
display: table;
}
body > .someclass {
width: 300px;
height: 300px;
text-align: center;
border:dotted;
margin: 0 auto
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
</body>