CODEWITHSUNDEEP
htmlcss
Amir Abu Shareb
Amir Abu Shareb

Reputation: 164

Full width gallery with an image in the center

I have to create a gallery with "endless" width, each slide is 940px wide, the website center is simple width:940px;margin: 0 auto 0; how can i force the current image to be exactly at the center of the website ?

here is my attempts:

1

  #gallery {
    white-space: nowrap;
    text-align: center;
  }

2 

  #gallery {
    width: 100%;
    text-align: left;
  }

Note that i can solve this layout issue with javascript, i am looking for a solution with pure css.

Thanks.

Upvotes: 0

Views: 787

Answers (1)

Alan Shortis
Alan Shortis

Reputation: 1109

This might help - the following CSS will place a div in the center/middle (horizontally and vertically) rather than just centered horizontally as with align:center.

http://jsfiddle.net/fSNJR/

#centerdiv { 
position:absolute; 
top:50%; 
left:50%; 
width:940px; 
height:300px; 
margin-top:-150px; /* Half your height */
margin-left:-470px; /* Half your width */
background:#333; }

Upvotes: 1

Related Questions