Centrer un site Web horizontalement et verticalement

vue sur http://www.eveo.org
site de téléchargement pour la modification facile:
http://www.eveo.org/backup/eveo.rar
http://www.eveo.org/backup/eveo.zip Centrer un site Web horizontalement et verticalement

Comme vous pouvez le voir en ce moment, il est centré horizontalement et verticalement en une méthode de table simple:

<table cellpadding="0" cellspacing="0"> 
    <tr> 
     <td align="left"> 
     *put anything in here and it will be aligned horizontally and vertically 
     </td> 
    </tr> 
</table> 

accompanying CSS: 

table 
{ 
height: 100%; 
width: 100%; 
vertical-align: middle; 
}

Cependant, dans mon document, je ne l'ai pas mis un doctype, je ne dispose que:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Si j'ajoute un type de document standard tel que:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

ma méthode de table n'est plus valide et ne fonctionne pas. J'ai donc besoin d'une nouvelle façon de centrer ma page Web verticalement et horizontalement, quelle que soit la taille de la fenêtre du navigateur.

Source

2011-08-15 eveo

voir http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically -avec-css? – Mat

Il existe des solutions multi-navigateurs qui ne nécessitent pas de Javascript ou de piratage.

Un bon exemple est here

Jetez un oeil aussi sur un this.

Pour certains apprentissage, vérifiez cet excellent example de gtalbot sur l'alignement horizontal en CSS.

bonne chance>)

Source

2011-08-15 12:35:26 Rdpi

Merci l'homme! J'ai eu des problèmes pour le centrer verticalement. Le [premier exemple] (http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm) est bon, mais je suis perplexe quant à la façon dont ils essaient de faire du copyright CSS ... – Wilf

Ne fonctionne pas correctement pour moi. Redimensionnez-le à une hauteur plus petite que le contenu. – dude

Vous pouvez le faire avec CSS/HTML, mais la méthode que je vais utiliser fonctionnera mieux si votre taille est connue, ou vous pouvez utiliser JavaScript pour saisir la hauteur.

HTML:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>My Centered Page</title> 
    </head> 

    <body> 
     <div class="container"> 

      <!-- My Content will be 500px tall --> 

     </div> 
    </body> 
</html>

CSS:

.container { height:500px; margin:-250px /* Half the height container */ auto; position:absolute; top:50%; width:960px; }

JavaScript (jQuery): Si vous ne connaissez pas la hauteur ou si elle change.

(function() { 

    var $container = $('.container'), 
     height = $container.outerHeight(); 

    $container.css({ 
     'marginTop': (height/2) * -1 
    }); 

})();

Source

2011-08-15 12:30:07 Seth

Il est un moyen facile de centrer une page en utilisant seulement CSS en utilisant inline-blocs: http://jsfiddle.net/CUd8G/

Il fonctionne quand il y a très peu de contenu: http://jsfiddle.net/CUd8G/1/
Quand il y a beaucoup de contenu: http://jsfiddle.net/CUd8G/2/
Avec la largeur fixe (cependant, cela fonctionne avec la largeur/hauteur inconnue): http://jsfiddle.net/CUd8G/3/

Source

2011-08-15 12:54:22 kizu

HTML

<div id="container"></div>

CSS

div#container { 
    width: 200px; 
    height: 200px; 
    margin-left: -100px; /* Half of width */ 
    margin-top: -100px; /* Half of height */ 
    position: absolute; left: 50%; top: 50%; 
}

Source

2011-08-15 13:37:02

Simple et efficace! Je vous remercie! –

Centrer un site Web horizontalement et verticalement

Répondre

Questions connexes