I'm working on a lightbox. I need it to be dynamically sized based on its content. But I also need it to be centered in the screen. I'm trying something like this:
HTML:
<div class="lightbox-background">
<div class="lightbox">
LIGHTBOX CONTENT
</div>
</div>
CSS:
.lightbox-background {
background-color: rgba(0,0,0,0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.lightbox {
background-color: white;
width: 780px;
z-index: 100;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto !important;
max-height: 90%;
}
I couldn't make it work. I'd like to avoid using JS, if possible. How can I do it?
You could work with vertical-align: middle as well as the :before selector on the parent container. Check out my fiddle:
http://jsfiddle.net/GA5K3/2/
The best way that I know to center vertically with CSS is to absolute position top 50% then set a top margin negitave half height of element.
Since you don't know the height you'll have to use JS.
Maybe someone has a better technique.
Related
New guy over here. I've searched and have found similar issues but not exactly what I am after.
I simply want to know how to horizontally centre an image within a div, but also position the image at the bottom of the div (20px or so from the bottom to be precise).
I can kind of get the look I'm after by setting the container div as position:relative, and the image position:absolute, with bottom:30px and margin-left: 49%. I would just rather it be exact, rather than using left margin. The container needs to be relative for other elements I have on the page.
Any help will be greatly appreciated. Thanks.
Horizontally center and vertically bottom divClick here
.parent {
position: relative;
}
.img {
width: 50px;
height: 50px;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 0;
}
centers the absolute image inside the relative div
div > img {
left: 50%;
transform: translateX(-50%);
}
Alternatively, you can combine setting left/right to zero and setting the left/right margin to auto:
.box {
position: relative;
}
.box img {
position: absolute;
left: 0;
right: 0;
bottom: 2em;
margin: 0 auto;
}
Demo: https://jsfiddle.net/ffyof90e/
Explanation: Why does "position: absolute; left: 0; right: 0; width: XYpx; margin: 0 auto" actually center?
Do it like this, for example:
<div id="divid">
<img src="http://pbs.twimg.com/profile_images/2284174872/7df3h38zabcvjylnyfe3_normal.png" alt="Smiley face" height="42" width="42">
</div>
You can now apply css like this:
div > img {
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
}
#divid{
position: relative;
height: 300px;
width: 300px;
border: 3px solid #73AD21;
}
You can check it at https://jsfiddle.net/n4528wxz/1/
I am trying to center an image of a phone vertically. The code I have to far works but if I decrease the window height the phone image will overlap the header. What I want to do is center the phone image vertically between the bottom of the header and the bottom of the window and stay there no matter how tall the window is (but not overlap the header).
Link to jsfiddle: jsfiddle.net/#&togetherjs=zAMDokl6RG.
Having lots of issues with this. Could someone give me some pointers on how to do this please? Thanks :
css:
* {
margin: 0;
padding: 0;
/* To keep our header correct */
}
#header {
background: #e9e6e6;
/* Here set your colour */
height: 55px;
width: 100%;
top: 0;
left: 0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
padding: 0px 0px;
z-index: -2;
}
.dllogodiv {
position: absolute;
top: 0;
right: 0;
padding: 5px 5px;
}
.centeredImage {
text-align: center;
display: block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div id="header">My header</div>
</div>
<div class="innerdiv">
<img class="imageCorner" src="http://s4.postimg.org/tyfx93u8p/logo.png">
</div>
<p class="centeredImage">
<img src="http://s4.postimg.org/p12cnzs9l/slide1.png">
</p>
heres a fiddle I put together
the idea is to have a top/middle/bottom. There is a css calc property you can use to calculate something, like height. Assuming you know what the height of your image is (lets say 200px), you can do:
top: calc(50% - 100px);
this will make the top of your image 50% from the top, minus half the size of the image, so that the middle of the image is 50% from the top.
of course, you have to set the middle section to position relative or absolute, and make the image position absolute inside.
This is just one quick way, there are other ways. Then again, usually you want to center something within a div, not the whole page.
I'm trying to vertically center text inside a div that is positioned absolutely.
I have tried table-cell approach with no luck. This is a responsive layout, so I'm trying to avoid setting fixed heights and prefer not to use Javascript either.
Thanks
Link to jsbin demo
HTML & CSS:
<div class="page-banner" style="background: url(http://www.bimga.com.php53-3.ord1-1.websitetestlink.com//wp-content/uploads/BIMGA_Website_InteriorPage_Banners_About.jpg) no-repeat scroll 0 0 / cover transparent">
<img style="visibility:hidden" src="http://www.bimga.com.php53-3.ord1-1.websitetestlink.com//wp-content/uploads/BIMGA_Website_InteriorPage_Banners_About.jpg">
<div class="left">
<div class="page-banner-text">this text needs to be verticall centered</div>
</div>
</div>
<style type="text/css">
.page-banner {
margin-bottom: 35px;
list-style: none;
width: 100%;
padding-left: 0;
position: relative;
}
.page-banner img {
width: 100%;
height: auto;
}
.page-banner .left {
background-color: rgba(10, 65, 142, .75);
position: absolute;
z-index: 1;
left: 0;
top: 0;
height: 100%;
text-align: center;
width: 50%;
}
</style>
We could use a transform like so:
Have a jsBin!
CSS
.page-banner-text {
top: 50%;
transform: translateY(-50%);
position: absolute;
}
More information on this technique.
What you can do is, set the text position to absolute.
Then give it a top: 50%; and give it a top margin of minus half its height.
I would not prefer using position absolute and top: 50% for better multi browser support (espesially on older IE versions) so I would prefer adding line-height: x em; in your .page banner class. Em because you have defined the height by % so it needs to always be on the center no matter the actual pixel height.
.page-banner .left:after {
content: "Background text";
position: absolute;
top: 40%;
left: 35%;
z-index: -1;
}
I have a question regarding the absolute position div.
I have something like
<div id='body-container'>
<div id='content-wrapper'>
contents....
</div>
</div>
I need to make my body-wrapper with absolute position because of other issues.
my css
#body-container{
position: absolute;
right: 0;
left: 0;
height: 100%;
overflow-y: hidden;
}
I have encounter a problem. Inside my content-wrapper, I have dynamic contents that will be added inside. It will create a unwanted scrollbar and the div become scrollable in that div. Is there anyway to kill the scrolling behavior? Thanks so much.
Remove the height property from your #body-container, and it will fit the content's height. No scrollbar.
http://jsfiddle.net/QeFe5/
EDIT
If you need the wrapper to be full height, then don't forget to set the top: 0 property, so the body won't create a scroll:
#body-container{
position: absolute;
right: 0;
left: 0;
top: 0;
background: silver;
height: 100%;
overflow: hidden;
}
Updated: http://jsfiddle.net/QeFe5/1/
This might work...
#body-container{
position: relative;
}
#content-wrapper{
position: absolute;
right: 0;
left: 0;
height: 100px; /* Need to put an exact height */
overflow: hidden;
}
If you need the content-wrapper to extend the full page you can use top and bottom with absolute positioning and make sure that your body-container (and it's enclosing containers) have height 100%.
#body-container{
position: relative;
height: 100%;
}
#content-wrapper{
position: absolute;
top: 0;
bottom:0;
right: 0;
left: 0;
}
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.