2010-01-26 4 views
3

j'ai trois divs en dehors de ma ContentPlaceHoldercomment afficher la page entière au centre du navigateur

Code masterpage:

<div id="content-outer" class="clear"> 
<div id="content-wrapper">  
    <div id="content">  
    <asp:ContentPlaceHolder ID = "ContentPlaceHolder1" runat="server" > 
     </asp:ContentPlaceHolder>  
    </div> 
</div> 
</div> 

la largeur div extérieure contenu est 1400px, il fonctionne bien dans la écran dont la largeur est 1400 ou plus mais quand je l'exécute dans les éboulis de largeur 1024, toute la page commence à partir de la gauche ,,, je veux aligner ma page lorsque ouvert dans le navigateur, j'ai donné quelques propriétés css comme

contenu-extérieur: marge gauche: auto; marge-droite: auto; (ne fonctionne pas)

mais je ne suis pas en mesure de centrer aligner toute ma page ,,, plz dites-moi comment puis-je faire cela, j'ai également donné les mêmes propriétés pour le corps, mais encore une fois pas chance

+0

votre code corps
jjj

+0

coller tout votre code s'il vous plaît – jjj

+0

u veux dire horizontol et alignements verticaux – Mishigen

Répondre

1

juste playaround avec des styles suivants

<body> 
<div id="divMain"> 
    ... 
</div> 
</body> 


body 
{ 
margin: 0; 
padding: 0; 
text-align: center; 
} 
#divMain 
{ 
margin: 0 auto; 
padding: 0; 
width: 1024px; 
text-align: left; 
} 



or 

.divMain 
{ 
position: absolute; 
left: 10%; 
width: 80%; 
} 
7

tout d'abord, l'utilisation de la balise centre a été désapprouvée, vous ne devriez pas l'utiliser.

<center> 
    Your content here 
</center> 

Votre solution (je l'ai mis en ligne le css pour plus de clarté)

<div style="width: 1400px; margin: 0 auto;"> 
    Your content here 
</div> 

est la méthode correcte de centrage contenu sur une page.

Comme vous l'avez remarqué, si l'écran est plus petit que la largeur de votre contenu, il ne semble pas être centré. C'est parce qu'il n'y a pas d'espace pour une marge sur la gauche ou la droite de la page et il serait incohérent de démarrer la barre de défilement du navigateur au milieu de la page.

Vos options sont:

  1. en direct avec elle - c'est la façon dont tous les sites alignés centre-travail
  2. Réduire la largeur de votre site pour travailler sur des écrans plus petits (il aura alors une plus grande marge à plus grande écrans)
  3. Faites votre design plus fluide - comme dans l'exemple ci-dessous

Hope this helps.

<div style="width: auto; margin: 0 10%;"> 
    Your content here 
</div> 
Questions connexes