I try to make a feature for something like a forum. People can use a custom BBcode to generate a thumbnail of an image and onclick i see an image modal with an image with max-height & max-width for dynamic sizes.
And there is my problem with the image modal. I cant get the result to properly center to screen. When formatting like this, the image centers horizontally but sticks vertically to the top. What can I do?
HTML:
<div class="wrapperDiv">
<img class="fullimage" src="$someUrl">
</div>
CSS:
.wrapperDiv {
position: fixed;
display: block;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10000;
}
.fullimage {
height: 100%;
max-height: 500px;
max-width: 500px;
}
You should try to you flex instead, like this :
.wrapperDiv {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.fullimage {
height: 100%;
max-height: 500px;
max-width: 500px;
}
https://codepen.io/GuillaumeGautier/pen/rNxxKJZ
Related
I loosely followed a basic CSS lightbox template from w3 schools for modal lightboxes. I haven't gotten to the Javascript yet, but just laying out the look and style of the lightbox.
I have a fixed position div element serving as the grey background, and inside that the "lightbox-content" div to hold an iframe of a Vimeo link. I followed a workaround to make the iframe responsive by containing it inside another div and adjusting the styling. I want the max-width of my iframe to be 1280px, but up to 100% width on anything smaller.
Everything works great on smaller screens, the iframe and contained link fills the width, stays vertically centered, and scales with the page. However, when I go above the 1280, the iframe moves in all sorts of weird ways. I'd like to have it so when the page width goes about 1280 or so,the iframe just stays at a fixed size in the center of the screen at 1280px wide.
I tried using an #media query to change some of the CSS rules, but I'm getting so lost in the position after several hours of trying. I think what's throwing me is having so many div with different types of positioning inside each other, and also not clearly understanding how to properly clear CSS rules within a media query.
Is there anything obvious I've done wrong that I could fix to help resolve the issue? It's hard to see the effect in the tiny result window, so if there's a way to make it full-screen in the browser, hopefully you can see what I'm talking about.
.lightbox {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: auto;
padding-top: 0px;
z-index: 1;
background: rgba(0, 0, 0, .85);
width: 100%;
height: 100%;
}
.lightbox-content {
position: absolute;
width: 100%;
height: auto;
max-width: 1280px;
max-height: 720px;
top: 45%;
left: 50%;
right: 50%;
margin-top: -25%;
margin-left: -50%;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
#media only screen and (min-width: 1299px) {
.lightbox {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
padding-top: auto;
z-index: 1;
width: 100%;
height: 100%;
}
.lightbox-content {
position: relative;
width: 1280px;
height: 720px;
max-width: none;
max-height: none;
top: 0;
left: 0;
right: 0;
margin-top: auto;
margin-left: auto;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
}
.responsive-iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
}
}
<div id="myLightbox" class="lightbox">
<div class="lightbox-content">
<div class="responsive-container">
<iframe class="responsive-iframe" id="lightbox-window" name="lightbox-window" src="https://player.vimeo.com/video/261201719" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
</div>
Stack Overflow seems to be full of similar questions but I haven't found a satisfying answer for my use case. Basically, I need a responsive, full screen background image for the top part of my front page. Means, narrowing the viewport leads to cropping, not stretching; the image should be centered. I'd like to avoid JS for this.
Aaron created a fiddle that almost looks like what I'm searching for. Two problems:
Strange behaviour when narrowing viewport (below 500px width)
position: fixed;
I was able to reproduce the solution of Bryce Hanscomb and Gabriela Gabriel for a container (see my fiddle):
But I failed to extend this to full screen. This is my code (see fiddle):
HTML:
<div id="background">
<img src="//dummyimage.com/600x200/0099cc/fff.png" />
</div>
CSS:
div#background {
background-color: orange;
min-height: 100%;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: -1;
}
img {
left: 50%;
position: relative;
transform: translate(-50%, 0);
min-height: 100%;
min-width: 100%;
}
Problem #1: The image doesn't take up the full height of its parent div (with min-height set to 100%).
Problem #2 + #3: In a narrow viewport, the image is cut off on the right (not centered), and a horizontal scrollbar is shown.
As a side note, can somebody tell me where those 4 pixels come from?
Your image will fill the entire space and also not have the problem of not being centered if you use position:absolute on your image
div#background {
background-color: orange;
min-height: 100%;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: -1;
}
img {
left: 50%;
position: absolute;
transform: translate(-50%, 0);
min-height: 100%;
min-width: 100%;
}
The issue with the 4px at the bottom is because images always align to the top just like text, this also adds a bit of padding to the bottom to make the baseline for the text so that letters can hang down under the rest.
If you set vertical-align: bottom it should fix it like so:
h1 {
text-align: center;
}
div#container {
background-color: black;
height: 200px;
width: 100%;
margin: 50px auto;
}
div#content {
background-color: orange;
min-width: 100%;
overflow: hidden;
}
img {
left: 50%;
position: relative;
transform: translate(-50%, 0);
vertical-align: bottom;
}
<div id="container">
<div id="content">
<img src="//dummyimage.com/600x200/0099cc/fff.png" />
</div>
</div>
For the centre aligning of the image, I would personally recommend actually using css background-image and then setting the background-position like so:
div#background {
background-color: orange;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
z-index: -1;
background: url(//dummyimage.com/600x200/0099cc/fff.png) center center no-repeat;
background-size: cover;
}
<div id="background">
</div>
This question already has answers here:
How to center div in the page? (Height & Width)?
(2 answers)
Closed 8 years ago.
I mean, if i have a div, with 200px of height and 200px of width, and i want to align it vertically (i can align it horizontaly with "margin: auto", but, is there a way to align it vertically without knowking the height of the screen?
Thanks and sory for my english, it's not my native language
edit: height of the screen
Centering things with table display is pretty handy... Take a look at this this:
http://jsfiddle.net/F9J4B/
Note that this is not "layouting with table"... It's just three divs that are using the table's display rules. No semantics rules are broken =)
HTML
<div class="table">
<div class="tr">
<div class="td">
<p>Hello! I'm a DOM element. <br>I can be whatever size i want, and still still be in the center of things.</p>
</div>
</div>
</div>
CSS
body,
html {
height:100%
}
.table {
width: 100%;
height: 100%;
display: table;
background-color: #eee;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Here's an example, FIDDLE
div {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
Centering a box inside another box:
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
regardless of the size of the boxes.
The outer box may need position: relative; for the inner boxes' positioning to work.
The Media Query handles the image when the screen gets too small.
.vertcenterdiv {
position: absolute;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/2/27/Square_200x200.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% auto;
height: 200px;
width: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
#media (max-width: 200px) {
.vertcenterdiv {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
margin-top: 0;
margin-left: 0;
}
}
Good day.
I know that if you want to absolute center a div, you do this:
<div id="parent">
<div id="child">blahblah</div>
</div>
CSS:
#parent{
width: 500px;
height: 500px;
position: absolute; /*(or relative)*/
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -250px;
text-align: center;
}
What if the parent div is a fluid div? How do you ABSOLUTE center it meaning:
#parent{
max-width: 500px;
max-height: 500px;
top: 50%; ->is this right?
left: 50%; -> is this right?
margin-top: ???;
margin-left: ???;
text-align: center;
}
As the width and height are fluid, you need to go with javascript or jQuery. Just add the below code in head tag. (The below example is in javascript)
<script>
window.onresize = function(){
//To work even on resize
getToMiddle();
}
window.onload = function(){
getToMiddle();
}
function getToMiddle(){
var box = document.getElementById('parent');
var height = box.offsetHeight;
var width = box.offsetWidth;
box.style.top = -(height/2);
box.style.left = -(width/2);
}
</script>
and your css would be something like this:
#parent{
max-width: 500px;
max-height: 500px;
background-color:green;
position:absolute;
top: 50%;
left: 50%;
/* width: 10%;
height: 10%; */
}
To test, give width: 10%; and height: 10%
Working Fiddle
This can be done with CSS alone.
#parent {
position: absolute;
max-width: 500px;
max-height: 500px;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See demo https://jsfiddle.net/matharden/8kmvt8qd/
I'll simply use flex to achieve this...
#parent {
display: flex;
justify-content: center;
}
<div id="parent">
<div id="child">blahblah</div>
</div>
I'm looking for the proper CSS method to overlay div of images on top of another div of images (not background image) without using position:absolute. Anyone know how to do this?
http://jsfiddle.net/HUUQ6/2/
You can overlay/overlap elements on top of one another using a negative margin.
Example:
#b{
margin-left:-10px;
}
This will move the element b to the left 10px, overlaying whatever is to the left of it (assuming this is a display:block type element, not an inline, like a span).
position: absolute isn't "improper" - it's part of the CSS spec! There isn't another way to put elements over other elements, unless you faff about with position: relative or maybe some float properties.
position: absolute is the easiest way to do it. What makes you think it's a bad idea?
The only other solution is to use an image inside a div with a background, like this:
<div>
<img src="...">
</div>
Then give the div a background-image:
div
{
background: url(/images/foo.png) no-repeat;
}
However, for multiple images I'd definitely stick to position: absolute.
There's a very glitchy demo here demonstrating the effect.
Here's how to layer 2 images and center the second image.
NOTE: "Position: absolute" in "image2" is only used so the images can overlap. It will still center your image responsively / without needing to use "left: " or "right: " or margin, and is independent of the image size.
HTML:
<div class="page-container">
<div class="images-container">
<img class="image1" src="YOURIMAGEURLHERE" />
<div class="image2container">
<img class="image2" src="SECONDIMAGEURLGOESHERE" />
</div>
</div>
</div>
CSS:
body, html {
height: 100%;
width: 100%;
margin: 0;
}
.images-container {
position: relative;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
}
.image1 {
position: relative;
top: 0;
left: 0;
//if you want to blur the outer image
//transform: scale(1.1);
//filter: blur(20px);
//-webkit-filter: blur(20px);
height: 100vh;
width: 100vw;
}
.image2container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.image2 {
position: absolute;
top: 0px;
}
.page-container{
}
SCSS (if you prefer it, which I do - makes it much easier to copy styles from 1 file to another)
body, html {
height: 100%;
width: 100%;
margin: 0;
}
.page-container {
.images-container{
position: relative;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
.image1 {
position: relative;
top: 0;
left: 0;
//if you want to blur the outer image
//transform: scale(1.1);
//filter: blur(20px);
//-webkit-filter: blur(20px);
height: 100vh;
width: 100vw;
}
.image2container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.image2 {
position: absolute;
top: 0px;
}
}
}
}