3 svar · 301 visningar · startad av asp
Hej.
Jag har en sida med flertalet bilder där man måste scrolla för att se alla bilder. När man klickar på någon av bilderna öppnas ett lager. Nu vill jag att detta lager placeras mitt på sidan.
Hur gör jag det? :q
Kan dessa länkar hjälpa dig:
http://bluerobot.com/web/css/center1.html
http://bluerobot.com/web/css/center2.html
Hjälpte mig lite, på bredden. Men höjden får jag inte att stämma. Oavsett var man är på sidan (scrollat ner lite) så skall den komma precis på mitten........
Här har du en lösning:
<!doctype html>
<title>Vertical centering and position:fixed</title>
<style>
/* zero margins */
html, body { margin:0; padding:0; }
/* trigger scolling */
p { margin:10em 0; }
/* position:fixed */
.outer { position:fixed; top:0; left:0; width:100%; height:100%; }
/* certering */
.middle { height:100%; display:table; margin:0 auto; }
.inner { vertical-align:middle; display:table-cell; }
</style>
<!--[if lte IE 6]>
<style>
/* position:fixed for ie6 */
html { overflow-x:auto; overflow-y:hidden; }
body { overflow-y:auto; height:100%; }
.outer { position:absolute; }
</style>
<![endif]-->
<!--[if lte IE 7]>
<style>
/* centering for ie6/ie7 */
.middle { position:absolute; top:50%; left:50%; height:auto; }
.inner { position:relative; top:-50%; left:-50%; }
</style>
<![endif]-->
<!-- some text to scroll -->
<p>lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
<!-- the box -->
<div class="outer">
<div class="middle">
<div class="inner">
This box is centered and fixed.<br>
It doesn't matter what size this box has.<br>
Tested in IE6, IE7, Firefox, Opera and Safari.<br>
In IE5 and IE5.5 the box is centered but not fixed.
</div>
</div>
</div>
Se demo. :)