CODEWITHSUNDEEP
htmlcss
KexAri
KexAri

Reputation: 3977

Center image vertically between header and bottom of window

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>

Upvotes: 0

Views: 49

Answers (1)

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

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.

Upvotes: 1

Related Questions