I've been kicking myself for days over this; hopefully someone can help! I'm trying to vertically align a video in the middle of a fixed height cell. The overflow at the top and bottom should be hidden.
Here is my code up to now:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="500" style="display: block; overflow: hidden;">
<div style="position: relative;">
<video autoplay loop width="100%" style="display: block;">
<source src="video.mp4" type="video/mp4">
</video>
</div>
</td>
</tr>
</table>
This renders with the overflow at the bottom hidden, but any attempt to vertically center it fails...
Any help would be great!
Changing the styles for the td centeres the video vertically:
style="vertical-align: middle; overflow: hidden;"
Related
I'm creating a simple web page using only HTML (so I don't use CSS or anything else) and I want to create an iframe in the horizontal center of the page. This is the code
<body>
<iframe height="200" width="800" src="http://www...." align="center" frameborder="0"></iframe>
<!other stuff>
</body>
If the alignment is setted as "right", the iframe appears on the right, but if it's setted as "center" (as it is in the code) it appears on the left, as it happens when the alignment is "left".
Thanks to everyone who can help.
Include the iframe in a div with align="center" like this:
<body>
<div align="center">
<iframe height="200" width="800" src="http://www...." frameborder="0"></iframe>
</div>
</body>
Check on this JSFiddle that it is on the center.
UPDATE
As Quentin has mentioned in his comment bellow, the use of align="center" is obsolete in HTML5. As an alternative you can use style="text-align:center" like this:
<div style="text-align:center">
<iframe height="200" width="200" src="http://www...." frameborder="1"></iframe>
</div>
Check this updated JSFiddle.
here is an working code using flex
<body style="display:flex;position:relative;margin:0; justify-content: center;">
<iframe height="200" width="200" src="https://www.w3schools.com" frameborder="0" ></iframe>
</body>
Fiddle link
I used the widget API from soundcloud and embedded the widget into my HTML file but I am having trouble center aligning it.
The HTML code is
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="middle" src="musiclink&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
As you can see I tried align="middle" but it did not work.
I tried align="left" and that worked but for some reason align="middle" did not work. Furthermore, I went into the API code and tried to change the CSS styling to
.widget {
background-position: center center;
}
But that did not work either
What am I doing wrong/missing?
You can surround the iframe with a div:
<div style='text-align:center'>
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="center" src="musiclink&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
middle is a value for valign.
Use align="center" instead.
More on valign: Here.
More on align: Here
put a div around the iframe and set the left and right margin to auto. it will center this div inside of it's container.
<div style='margin:0 auto;'>
<iframe width="50%" height="300" scrolling="no" frameborder="no" align="center" src="musiclink&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div>
I have been trying to align 2 different iFrames on a page, one to the right and another to its left. The iFrame to the left needs to have a width of 25% and height 100%, whereas the iFrame to the right needs to have a width of 75% and height 100%. They are placed inside a table having a height and width of 100%. I tried running my code on JSFiddle.net and it more or less looks the way I would have expected, however, it does not appear the same in my application (it definitely is not aligned 25%-75%). Here's a screenshot.
Here's my code snippet for the table:
<table height="100%" width="100%">
<tr style="height:100%">
<td style="width:25%">
<iframe name="ifrTemplateLeftPreview" id="ifrTemplateLeftPreview" width="100%" height="100%"></iframe>
</td>
<td style="width:75%">
<iframe name="ifrTemplateRightPreview" id="ifrTemplateRightPreview" width="100%" height="100%"></iframe>
</td>
</tr>
</table>
I tried replacing '%' with pixels (px) to set the width of both tags, however, it seemed to mess the page up a bit and didn't seem to solve the issue.
The above code is only a part of the entire ASPX page, and I am sure nothing apart from this code snippet is causing any problems with the alignment of the iFrames. I have tried different ways but hasn't helped. Any help will be highly appreciated.
Alright, I sorted the issue myself. Basically I changed the <td>'s to <div>'s and added a float:left attribute to both iFrames and that seems to have sorted the issue:
<table height="100%" width="100%">
<tr>
<td>
<div style="width:100%">
<div style="width:25%; float:left">
<iframe name="ifrTemplateLeftPreview" id="ifrTemplateLeftPreview" width="100%" height="100%"></iframe>
</div>
<div style="width:75%; float:left">
<iframe name="ifrTemplateRightPreview" id="ifrTemplateRightPreview" width="100%" height="100%"></iframe>
</div>
</div>
</td>
</tr>
</table>
I have an image which I would like to position near the right margin of my HTML page, and hover over all else on the page. I would also like the image to stay near the right margin when the window is resized. As of now, the image stays in a fixed position within the browser window instead, even appearing outside the page content area when the browser window is extended wide. My page content is centered in the browser window. Below is the code on the image:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<table width="900" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td background="../images/FWA_INV_head.jpg" valign="top" align="center">
<img src="images/bannerX.png" border="0" class="image" style="position:absolute;z-index:90;>
and here is the CSS:
.image {
position:absolute;
opacity:.90;
-moz-opacity:.90;
filter:alpha(opacity=90);
}
Please help me see the error of my ways.
When positioning an absolute element your absolute position is positioned inside of the nearest relative position. So it's absolutely positioned inside the relative position. Also your inline style has no closing "
I have a problem that seems to only occurs in IE (i'm currently using IE8). Basically, i have web pages that consist of a header, content area and a footer. I am trying to stretch an image to be displayed as a left and right border in the content area. the image is not a solid color, so simply setting a border property would not work. In all browsers but IE, the image stretches just fine.
The site is heavily table based due to the fact that it is written for a CMS known as NetSuite. A lot of the tables and html are created by the CMS and are very difficult and tricky to modify.
You can see the page in action at - web site page
I have tried numerous combinations of height:100% and different positioning values with little help. One of the problems is that the height of the content area is dynamically set.
The code in place now looks like this:
<table border="0" cellpadding="0" cellspacing="0" width="1020" height="100%" align="center">
<tr style="height:100%;">
<!-- left side image -->
<td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td>
<td valign="top" width="400" align="center">
<!-- right side image -->
<td style="width:9px; height:100%;"><img src="http://www.marware.com/images/body_outer_border.png" border="0" height="100%" width="9" /></td>
</tr>
<td style="height:100%; position:relative;">
<img style="position:absolute; top:0px; left:0px; width:100%; height:100%;" border=0 src="http://www.marware.com/images/body_outer_border.png" width="9" height="100%">
</td>
Make the img absoultely positioned at 0,0 with 100% width and height. And relative positioning on the td so the absolute positioning is relative to it. I'm relatively sure that this absolutely works in IE8.