I have an iframe inside a div like this:
<section>
<div>
<iframe></iframe>
</div>
</section>
the iframe contains a youtube video in flash but that probably won't matter in this case.
I'm building a mosaic and is therfore trying to use the div to crop the iframe to an appropriate size.
this is done by
.section
{height: 251px;
width: 198px;
overflow: hidden}
Works great but I would like to center the video aswell. For images, I add them as background-images and use
background-size: cover
to center them. This is neat because they automatically rescale to maximum possible size. However this doesn't work for video. I would settle for simply centering the iframe vertically and horizontally, if possible.
Will adding this to your css help? It works if div is bigger than section.
section div {
margin-top:-50%;
margin-left:-50%;
}
http://jsfiddle.net/hvCXm/
Wrappping the iframe and use text-align: center; to align horizontal center
div {
text-align: center;
display: block;
}
or
iframe {
margin: 0 auto;
display: block;
}
Try:
iframe {
margin:0 auto;
}
The standard way to center block elements:
iframe {
display: block;
margin-left: auto;
margin-right: auto;
}
Related
I am relatively new to front-end dev so a bit lost as to how i can go about this. I created a container that contains a slider and some images. My supervisor has a huge screen so obviously there will be empty space at the bottom of the screen. So he doesn't want that. Instead he wants the container to be centered horizontally and vertically based on the size of the user's screen.
How can I do this properly with as minimal code as possible? I believe there is jQuery plugin but wanted to see if there is a better way or if doing this makes sense at all or not?
Due to the flow-based nature of CSS, without Javascript this can only be done if the vertical size of the centered element is fixed, by applying a position:absolute' andtop:50%` within a fixed container, and then use negative margin to offset the container. Click here for JSFiddle Sample.
Alternatively the same effect can be reached by using display:table-cell, but that's kind of messy and loses you a lot of flexibility. Sample already supplied in the other answer here so I'll save myself the effort :)
You can do it easily using a vertical-align property.
Since vertical-align works the desired way way only in a table cell, this trick with display property can give you the desired effect.
#yourDiv {
// give it a size
width: 100px;
height: 100px;
margin: 0 auto;
}
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
See a fiddle with demo.
Try this:
HTML:
<div class="center"></div>
CSS:
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
background-color: red;
}
Demo: http://jsfiddle.net/WDth4/
Exactly Center an Image/Div Horizontally and Vertically:
http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/
I'm trying to center images in a container but it is not working. Til sofar the css looks like this;
#wrap{
min-height: 100%;
}
#imagebar{
position:fixed;
margin:0 auto;
top:60%;
width: 100%;
height: 200px;
background: yellow;
}
#albums{
margin:8px;
display: inline-block;
}
My website is http://www.robcnossen.nl/
I thought that margin-left:auto;margin-right:auto; would be good but thinks are not working how I thought it would be.
Can anybody help me with this?
Thanks...
#imagebar {text-align:center;}
Your images aren't block-level elements, so simply applying text-align:center; to their parent will do the trick.
Since #imagebar has a width of 100%, its automaticly centered. You can center the images by using text-align: center within #imagebar.
I however think you want a specific 'content box' within #imagebar that is centered.
You can fix that by making a div inside #imagebar with a fix width (in px or %) and add margin: 0 auto to that inner div.
I have an image container based on Jquery Mobile listview element structure.
Looks like this:
<li>
<div class="ui-btn-inner">
<div class="ui-btn-text">
<a>
<img src="img/products/l/demo2.jpg">
<h3>product2</h3>
</a>
</div>
</div>
</li>
I'm overriding JQM-CSS to create an image gallery-list. Images and h3 are both contained inside a link element. As the images can have different heights, I want to set a CSS fixed-height/overflow:hidden to the link element to cut off images at the top using vertical align: top.
Here is my CSS so far:
li {
display: inline-block;
min-width: 200px;
max-width: 300px;
width: 24%;
}
li img {
width: 100%;
position: static !important;
max-width: 185px;
max-height: inherit;
}
// fix height and overflow hidden
li a {
height: 100px;
overflow: hidden;
vertical-align: bottom;
}
It doesn't work... If I check on Firebug, the element-height is set to 100px, but it covers the image top versus covering the image bottom and h3, which I do not want to crop away.
I have tried setting line-height to 100px as well, but this does not work at all.
Any hints on what I'm doing wrong?
Thanks!
EDIT:
Can't use clip either, because I don't know at what height I want to start (img.height-100px) and I cannot clip from the bottom. Or can I?
SOLUTION:
It would work like this:
li a {
position:absolute;
bottom: 0;
left: 0;
}
li div.ui-btn-text {
position: relative;
height: 100px;
overflow: hidden;
}
Doesn't use vertical-align but the result is ok.
I'm afraid that can't work. Adding display:block; to your link and would be a start for your method, but check the result: http://jsfiddle.net/uu96D/
vertical-align: bottom; won't push the a tag to the bottom of the container. Here is a guide of how vertical-align works: http://phrogz.net/css/vertical-align/index.html
To solve your problem i'd go to some js solution, and add a negative top margin to the image if its taller than, for example, 80px. Here's a fiddle with the result: http://jsfiddle.net/uu96D/1/
And the code using jQuery:
$('img').each(function(){
var height = $(this).height();
if (height > 80) {
$(this).css({marginTop: "-" + (height-80)});
}
});
I certainly do not want to add to the pile of vertical alignments CSS questions, but I've spent hours trying to find a solution to no avail yet. Here's the situation:
I am building a slideshow gallery of images. I want the images to be displayed as large as the user's window allows. So I have this outer placeholder:
<section class="photo full">
(Yes, I'm using HTML5 elements). Which has the following CSS:
section.photo.full {
display:inline-block;
width:100%;
height:100%;
position:absolute;
overflow:hidden;
text-align:center;
}
Next, the image is placed inside it. Depending on the orientation of the image, I set either the width or height to 75%, and the other axis to auto:
$wide = $bigimage['width'] >= $bigimage['height'] ? true: false; ?>
<img src="<?= $bigimage['url'] ?>" width="<?= $wide? "75%" : "auto"?>" height="<?= $wide? "auto" : "75%"?>"/>
So, we have a fluid outer container, with inside a fluid image. The horizontal centering of the image works, yet I cannot seem to find a way to vertically center the image within it's container. I have researched centering methods but most assume either the container or image has a known width or height. Then there is the display:table-cell method, which does not seem to work for me either.
I'm stuck. I'm looking for a CSS solution, but am open to js solutions too.
This works out fine:
section.photo.full {
display: table;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
text-align: center;
}
section.photo.full a {
outline: 0;
display: table-cell;
vertical-align: middle;
}
section.photo.full img {
margin-top: 0;
}
I'm guessing display table-cell hadn't worked for you because it's parent container wasn't displayed as a table.
Here is a demo in jsfiddle:
http://jsfiddle.net/duopixel/5wzPS/
Maybe this works for you (div is the div wrapped around your image):
div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
Running example.
Let's skip all of the table nonsense! :)
<div>
<img src="https://placehold.it/1000x1000">
</div>
div {
position: relative;
}
img {
position: absolute;
width: 70%;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
Example: https://jsfiddle.net/te29m9fv/1/
How to horizontally center a floating element of a variable width?
Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.
Assuming the element which is floated and will be centered is a div with an id="content"
...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS:
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that.
.center {
display: table;
margin: auto;
}
You can use fit-content value for width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
Say you have a DIV you want centred horizontally:
<div id="foo">Lorem ipsum</div>
In the CSS you'd style it with this:
#foo
{
margin:0 auto;
width:30%;
}
Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.
Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.
But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.
The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
Proof that it is working!
To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!
Can't you just use display: inline block and align to center?
Example.
for 50% element
width: 50%;
display: block;
float: right;
margin-right: 25%;