J'essaye de centrer verticalement et horizontalement cette div même s'il y a du contenu à faire défiler et que l'utilisateur fait défiler la page. Le test suivant fonctionne bien dans IE, mais dans Firefox, j'ai un effet de scintillement bizarre lorsque je survole l'image miniature. Des pensées?CSS/jQuery Verticalement et horizontalement Centre DIV

<html> 
<head> 
<title>aj</title> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 

    $(function() { 
     // img preview 
     $('.img').hover(function() { 

      if (!$('#overlay').length) { 

       $('<div id="overlay"/>').css({ 
        position: 'fixed', 
        top: 0, 
        left: 0, 
        width: '100%', 
        zIndex: 100, 
        height: $(window).height() + 'px' 
       }).appendTo('body'); 

       $('<div id="item" />').css({ 
        border: '7px solid #999', 
        height: '500px', 
        width: '500px', 
        top: '50%', 
        left: '50%', 
        position: 'absolute', 
        marginTop: '-250px', 
        marginLeft: '-250px' 
       }).append('<img src="' + $(this).attr('rel') + '" alt="img" />').appendTo('#overlay'); 
      } 
     }, function() { 

      $('#overlay').remove(); 
     }); 
    }); 

</script> 

</head> 
<body> 
<img class="img" src="http://ajondeck.net/temp/paperboy_thumb.gif" rel="http://ajondeck.net/temp/paperboy.gif" 
    alt="image" /> 
</body> 

</html>

2010-04-03 aherrick

foo.css

#container { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
#position { 
    display: table-cell; 
    width: 100%; 
    text-align: center; 
    vertical-align: middle; 
}

foo.html

<html> 
    <head> 
    <link rel="stylesheet" href="foo.css" type="text/css"> 
    <!--[if IE]> 
     <style type="text/css"> 
     #container { 
     position: relative; 
     } 
     #position { 
     position: absolute; top: 50%; 
     } 
     #content { 
     position: relative; 
     top: -50%; 
     } 
     </style> 
    <![endif]--> 
    </head> 
    <body> 

    <div id="container"> 
     <div id="position"> 
     <div id="content"> 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, hendrerit nec, feugiat vitae, feugiat a, nisl. 
     </div> 
     </div> 
    </div> 

    </body> 
</html>

Démo

http://www.vdotmedia.com/demo/css-vertically-center.html

Note: c horizontale entrer devrait être une sueur à gérer par vous-même.

EDIT: Je trouvé another demo

EDIT: Pour que cette solution travail en HTML5, vous devrez ajouter à votre html, body { height:100% } CSS (et évidemment <!DOCTYPE HTML> au début votre code HTML).

Source

2010-04-03 08:22:26

@SwissMister, s'il vous plaît laissez vos modifications sous la forme d'un commentaire. –

CSS/jQuery Verticalement et horizontalement Centre DIV

Répondre

foo.css

foo.html

Démo

Questions connexes