I have looked all over the web for this answer but it seems to me that in order to horizontally center an image in div with absolute position, I need to know the dimensions of the image, but it's dynamic.
Here is my html:
<header>
<div id="elogo">
<img src="http://www.ftiweb.com/images/eStore/eStore_wht50.png">
</div>
<div id="nav">TOUR | MENU</div>
</header>
<div id="content">
<img class="ipad" src="http://ftiweb.com/images/eStore/Ipad_hand.png">
</div>
<footer>
<div id="foot">© FTIeStore 2013 • Privacy Policy</div>
</footer>
and here is the .css I'm using:
#content {
width: 70%;
height: 80%;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -35%;
display: table-cell;
img.ipad {
max-width: 100%;
max-height: 100%;
position: absolute;
bottom: 0px;
display: block;
}
The goal is just to have the image stay at the bottom/center of the page and re-size to fit the browser window. If I'm over-complicating this, please feel free to suggest an alternative.
Here is a link to a js.fiddle:
bottom-centered img - js.fiddle
If you want it to be absolute position do it like this:
http://jsbin.com/aveped/1/edit
img {
width:20%;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
}
The parent needs to have position relative, or it will be positioned against the body.
You dont need width for this, I just included width because my image is so big.
left = center position - half the width of the image
img {
position: absolute;
bottom: 0;
left: 50%; /*half the container width*/
margin-left: -250px; /*half the width of the image*/
}
Related
How to crop the top of an image has already been described in this question. However, I am trying to crop an image by a percentage when the image dimensions are not known ahead of time. The container's resulting height should then be dependent on the size of the image.
Using the following, I can crop the top of an image, but it requires manually specifying the amount of the image to show in pixels. Is there a way I can specify I want to crop the top 10% of the image without knowing the image size ahead of time?
.container {
overflow: hidden;
position: relative;
height: 370px;
}
.container img {
position: absolute;
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
Here is an idea that rely on scale. You keep the image in-flow (don't use position:absolute) then you scale the container by 0.9 which is 90% of the total height then you scale the image by 1.1 to keep it's original size. This will trim the image by 10% but since transform is only a visual effect you may have space at the top or the bottom of the container (based on the transform-origin)
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(1.1);
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
To be more precise we can consider calc() like below:
.container {
overflow: hidden;
outline:1px solid red;
display:inline-block;
}
.container img {
display:block;
}
.cut {
transform:scaleY(0.9);
transform-origin:top; /* The extra space will be on the bottom*/
}
.cut img {
transform:scaleY(calc(1/0.9));
transform-origin:bottom; /* This should be bottom to cut the top*/
}
<div class="container">
<img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
<img class="img" src="http://placekitten.com/300/200" >
</div>
I think the best approach to this without Javascript would be to translate the image up a certain percent, then scale it to fill the original height of the container. Anything else will leave a gap at the bottom.
.img_container img {
transform: translateY(-50%) scale(2);
}
https://jsfiddle.net/amoliski/n4ojdzyr/
This should do the trick, using translateY (got that from How can I get the height of an element using css only)
As you can see, the .container does not have a hardcoded height, however, it will load with the original image height, which is 500px, even though the image is loading as 450px (500px - 10%)
.container {
overflow: hidden;
position: relative;
}
.container img {
margin-left: auto;
margin-right: auto;
bottom: 0;
left: 0;
right: 0;
transform: translateY(-10%);
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
You can do this with a little bit of JavaScript (I've inlined it for simplicity's sake but you could move it to it's own function)
<div class="container">
<img class="img" src="http://placekitten.com/400/500" onload="javascript:this.parentElement.style.height = (this.height * 0.9)+'px';" />
</div>
Here's a working JSfiddle.
An alternative would be to use the top CSS property in a negative fashion on a relative image like the snippet below. This works for an image of an arbitary width and height. Just adjust your top value, accordingly.
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
display:flex;
margin-bottom: -10%;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -10%;
right: 0;
}
<div class="container">
<img class="img" src="http://placekitten.com/400/500" />
</div>
To remove the extra bottom margin, just subtract the margin-bottom equal to the amount you subtracted from the top. Here it is margin-bottom: -10%;
Adjust the top value according to your dynamic images. Also note, I added height:100% to your container so you can see the full image but the top part is cropped. I used flex for centering. Test for another image but this time, it is cropped 50% from the top
html,body{ height:100%; margin:0; padding:0; }
.container {
overflow: hidden;
position: relative;
height: 100%;
width: 100%;
margin-bottom: -50%;
display:flex;
align-items:center;
justify-content:center;
}
.container img {
position: relative;
bottom: 0;
left: 0;
height: 100%;
top: -50%;
right: 0;
}
<div class="container">
<img class="img" src="https://www.fujifilm.com/products/digital_cameras/x/fujifilm_x_t3/sample_images/img/index/ff_x_t3_002.JPG" />
</div>
I have looked up some tips about how to center a div in the middle of the page. I used this method:
width: 750px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -375px;
So, now that the div is in the middle of the page, I need some images inside of it to line up directly on top of one another. If I do this, I can fade them out using jQuery, revealing the new image.
Now, I tried many different techniques to line them up, but none work when they are centered like this.
HTML:
<div class="choose" align="center">
<h2 id="question">Rock, paper, or scissors?</h2>
<img src="Images/Rock.png" id="rock">
<img src="Images/Result/Red Rock.png" id="Selected" style="opacity:1">
<img src="Images/Paper.png" id="paper">
<img src="Images/Result/Red Paper.png" id="Selected" style="opacity:1">
<img src="Images/Scissors.png" id="scissors">
<img src="Images/Result/Red Scissors.png" id="Selected" style="opacity:1">
</div>
CSS:
.choose {
width: 750px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -375px;
}
.choose img {
margin-left: 5px;
margin-right: 5px;
width: 150px;
}
How do I do it?
This is a rock paper scissors game if you hadn't noticed. Here's what I've made so far.
You can position the images with absolute in the same coordinates so they stack on top of each other.
When your element has a specific width, left:0; right:0; margin:auto; is a cool way to horizontally center it in its relative parent. Same method works for vertical centering.
.choose img {
width:150px;
height:150px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
You can also use this method to offset elements from the center.
.choose img.rock {
left:-300px;
}
.choose img.sci {
left:300px;
}
Rock will be 300 to the left and scissors 300 to the right.
This is the HTML
<div id="logo">
<img src="image.png"
</div>
and this is the CSS for it
#logo {
position: absolute;
display:block;
/*background:#00FFCC;*/
top: 5px;
left:50%;
max-width: 520px;
max-height: 150px;
min-height: 150px;
min-width: 520px;
}
The image is aligned in the centre of the div but when I put 50% as the left attribute it uses the left side of the div as the centring point, so the left side of the div is in the centre not the middle, how can i change this?
You could simply use this instead (or margin-left):
margin:0 auto;
To center the img in the logo do this
FIDDLE
img
{
position: absolute;
left:0;right:0;
margin:auto;
}
or
FIDDLE
img
{
display:block;
margin: 0 auto;
}
Hi all. I need help in arrange the div of my website.
My website has 3 main DIVs.
1. DIV1 - My Header (fixed height)
2. DIV2 - Dynamic Content area so height varies
3. DIV3 - My Footer (fixed height)
All DIVs have 100% width.
The DIV1 header must have 0px with respect to the top of the browser. I wanted the 3 DIVs must be on top of each other as shown in the image. If the user has a resolution taller than my 3 DIVs, what will be at the most bottom after the DIVs are just empty spaces. However, I cant seem to get that layout working. the DIV3 footer keep giving me trouble.
I've following CSS code:
div1 {
position: fixed;
top: 0px;
}
div2 {
position: relative;
top: 0px;
}
div3 {
position: fixed;
top: 0px;
}
If I use position: fixed for DIV3, and my DIV2 has a shorter content, the whole website will look weird.
If I try changed to position: relative for DIV3, DIV3 will overlap and appear in front of DIV1.
Is there any better suggestion for that?
Thank you very much.
Is there any reason why you're using positioning to layout the div's?
Div's will naturally stack on top of each other without any need for positioning.
I think that you want fixed header and footer positioning.
http://www.cssplay.co.uk/layouts/basics2.html
HTML
<div class="div1">header</div>
<div class="div2">Content area</div>
<div class="div3">Footer</div>
CSS
.div1 {
height:100px; background:red; width:100%
}
.div2 {
position: relative;
top: 0px; background:green; width:100%; height:100px;
}
.div3 {
background:blue; width:100%; height:100px;
}
Demo http://jsfiddle.net/K3Unz/2/
I hope this may be helpful to you
use footer as bottom: 0px; if you want to fixed this in bottom
Here the demo: fiddle
body{
background:green;
}
div.one {
position: fixed;
top: 0px;
width: 100%;
height: 50px;
background: #4f4f4f;
}
div.two {
height: 100%;
width: 100%;
margin-top: 50px;
}
div.three {
position: fixed;
bottom: 0px;
width: 100%;
height: 50px;
background: red;
}
Check this: CSS layout generator.
EDIT:
Check this fiddle
Try using:
.head{
position:fixed;
top:0px;
}
.footer{
position:fixed;
bottom:0px;
}
In style, I put same height for div1,div2,div3 = 100px :
<style>
body
{
margin: 0 auto;
}
#div1 {
height: 100px;
width:100%;
top: 0px;
background-color:#F00;
}
#div2 {
height: 100px;
width:100%;
top: 0px;
background-color:#00F;
}
#div3 {
height: 100px;
width:100%;
top: 0px;
background-color:#FF0;
}
</style>
and in html tags:
<body>
<div id="div1">Header</div>
<div id="div2">Cotent</div>
<div id="div3">Footer</div>
</body>
I hope this will fit your requirements,
I have a GoogleMaps on my website.
My problem is CSS, how to do a CENTERED div that is positioned over Google Maps?
<div style="position:relative">
<div style="width:300px; height:300px" id="map_localization"></div>
<div style="position:absolute; width:100px; margin:0px auto;">CENTERED</div>
</div>
This is what almost works for me, but need to put the CENTERED layer OVER the map
Can you reveal some code?
I would do it by putting both the map and the div to be centered within a relative positioned div. Then I would absolute position both the map and the div inside.
I would center the div inside with absolute positioning: http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
Specifically, the CSS of the div to be centered would look something like this.
#divToBeCentered {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
Update
Actually, this fiddle I made illustrates what I meant by putting both the map and another div in a containing div:
http://jsfiddle.net/2zaxd/
Here's the HTML (similar to what you had).
<div id="containerForAll">
<div id="map_localization"></div>
<div id="divToBeCentered">CENTERED</div>
</div>
and the CSS.
#containerForAll, #map_localization, #divToBeCentered {
border: 1px solid #000;
}
#containerForAll {
position: relative;
width: 300px;
height: 300px;
}
#map_localization, #divToBeCentered {
position: absolute;
}
#map_localization {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#divToBeCentered {
width: 100px;
height: 100px;
margin-left: -50px;
left: 50%;
top: 50%;
margin-top: -50px;
}
This centers the inner div above your map via absolute positioning.