2010-11-25 5 views

Répondre

0

si vous voulez centrer le texte à l'intérieur du div verticalement et horizontalement peut-être vous pouvez essayer cette

#container{ 
position:relative; 
width:200px; 
height:300px; 
border:1px solid #CCCCCC; 
} 
#txt{ 
position:absolute; 
width:150px; 
height:50px; 
top:50%; left:50%; 
margin-top:-25px; /* 1/2 of height */ 
margin-left:-75px;/* 1/2 of width */ 
border:1px solid #FF0000; 
} 

<div id="container"> 
    <div id="txt">My Text</div> 
</div> 
0

Essayez ceci: rembourrage: 0px 0px 4px 0px;

0

Ajouter ce pour effacer Rembourrage bouton par défaut dans Mozilla:

button::-moz-focus-inner { 
    border:0; 
    padding-top:0; 
} 
+0

http://jsfiddle.net/PZ5AZ/1/. Nettoyer votre code n'est jamais mauvais. –

1

Vous ne pouvez pas aligner verticalement le texte en dehors des tables donc il y a deux options:

Vous jouez avec le rembourrage de l'élément parent pour réaliser l'illusion du texte aligné sur v. Comme illustré par M. Long.

ou

Vous faites la position de l'élément parent: relative; et l'élément enfant absolu:

<div id='container'> 
<div id='txt'>My Text</div> 
</div> 

#container{ 
position:relative; 
} 

#txt{ 
position:absolute; left:0px; top:50%; 
margin-top:10px; /* half the height of the text element */ 
} 

/* hint: for scaling attributes use %'s */ 

Je pense que la première option est la plus simple dans votre cas.

Bonne chance Bro!

W.

+0

qui devrait probablement être 'margin-top: -10px' (: – peirix

2

Comme cela a été dit précédemment alignement vertical est pas vraiment pris en charge sur tout ce qui est pas une cellule de table.

Mais si vous essayez juste de centrer une seule ligne de texte que vous pouvez utiliser line-height. Si vous définissez le line-height au même niveau que le height de l'élément et supprimez tout remplissage, le texte s'affichera au milieu de l'élément, comme s'il était aligné verticalement.

Donc, votre exemple qui suit fonctionnerait (si vous supprimez les styles par défaut en premier):

line-height:28px; 
height:28px; 
padding:0px; 

Mais si le texte enveloppe à plus d'une ligne cette solution ne fonctionnera pas, le texte va soudainement devenir très espacé.

Pour une solution plus générale, il est préférable d'utiliser javascript pour calculer dynamiquement le remplissage requis pour l'élément particulier.

Questions connexes