Center image vertically inside div is not working

Question

I am trying to center an image vertically inside a container div but its not working as expected .

The container div contain also so other images here is my html :

  <div id="first-part">
    <div id="slider">
       <img src="img/1.jpg" class="slider_image" id="1"/>
       <img src="img/2.jpg" class="slider_image" id="2"/>
       <img src="img/3.jpg" class="slider_image" id="3"/>
       <img src="img/next.png" id="next"/>
    </div>
  </div>

I wan to center the #next div inside the container here is my CSS :

body,#first-part,#slider{
  padding:0px;
  margin:0px;
}

.slider_image{
   width:100%;
   position:relative;
}

#slider{
  height:660px;
  overflow:hidden;
  display:inline-block;
  white-space:nowrap;
  position:relative;
}  

#next{
  position: relative;
  top: 50%;
  height: 6em;
  margin-top: -3em;
  width:80px;
}

I tried changing the Position to absolute fo #next but the images is not even appearing on both cases I tried also with is for #next :

#next{
  position:relative;
  width:80px;
  top:0px;
  bottom:0px;
  left:2px;
}

I don't won't to change the other css here is a JsFiddle

possible duplicate of [How to center image vertically?](http://stackoverflow.com/questions/19108911/how-to-center-image-vertically) — TylerH, Jan 06 '15 at 18:43
There are several hundred search results on Stack Overflow for "vertically align an image". I *sincerely* doubt none of them are the solution to your problem. — TylerH, Jan 06 '15 at 18:46

score 0 · Answer 1 · answered Jan 06 '15 at 18:47

0

use this code for vertical center

#next {
 position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

answered Jan 06 '15 at 18:47

sia

513
4
14

@Abdou if you could explain how you want everony will do – sanoj lawrence Jan 06 '15 at 19:00

score 0 · Answer 2 · answered Jan 06 '15 at 18:56

0

Try this:

#next{
  position: absolute;
  height: 6em;
  width:80px;
  z-index: 5;
  margin:auto;
  left:0;
  right:0;
  top:50%;
}

http://jsfiddle.net/bzwhpy8g/2/

answered Jan 06 '15 at 18:56

imnancysun

612
8
14

I want it centered relative to the div not the view port height – Abdou Jan 06 '15 at 18:59

score 0 · Answer 3 · answered Jan 06 '15 at 19:03

0

Since you are giving the #slider an exact height, its easier I think to adjust #next using something like "top:280px;". Play with this number to get it to "look" right. With collapsing margins, other items static, etc... the math doesn't need to make sense.

There is a more precise way of doing this but it involves making some other CSS changes.

answered Jan 06 '15 at 19:03

Eric Caudle

1
1

I want it to be responsive – Abdou Jan 06 '15 at 19:23
If this is true, then you cannot give it an exact height (height:660px;). You will also need quite a bit more styling to make this truly responsive. Feel free to put a percentage in and mess around with the number to get it to look vertically centered, but that's still not "responsive". – Eric Caudle Jan 06 '15 at 20:45

Center image vertically inside div is not working

3 Answers3