Div largeur 100%, mais voulez une ancre à l'intérieur pour seulement 85px de large?

Question

J'ai un div à 100%, afin de centrer les choses J'ai une balise d'ancrage à l'intérieur je veux seulement à la largeur de 85px, mais il ne reconnaît pas cela et étendra juste basé sur la longueur du texte qui est dans l'ancre marque.

HTML:

<div class="players_names"> 
    <a class="player_name" href="#">34 J. Langenbrunner</a><br /> 
    <a class="team_name" href="#">TORONTO</a> 
</div> 

CSS:

.players_names{ 
    width: 100%; 
    position: relative; 
    z-index: 3; 
    text-align: center; 
} 
.players_names a{ 
    color: #fff; 
} 
.players_names a.player_name { 
    width: 85px; 
    font-size: 1.1em; 
    text-align: center; 
    line-height: 1; 
} 

pourquoi ne peut-il faire exactement ce que je lui dis de le faire?

Answer 1

Par défaut, a est un tag inline. Pour spécifier une largeur (ou hauteur), vous devrez obtenir pour rendre comme inline-block (ou block, puisque vous semblez vouloir sur son propre privilège de toute façon):

.players_names a.player_name { 
    width:85px; 
    font-size:1.1em; 
    text-align: center; 
    line-height: 1; 
    display: block; 
} 

Answer 2

a est une étiquette de niveau en ligne. Seules les balises de niveau bloc peuvent avoir un ensemble de largeur. Comme cela a été indiqué dans le commentaire par kmfk, vous pouvez définir display: block dans votre CSS pour l'élément.

Answer 3

Il suffit de remplacer

players_names a.player_name { 
width: 85px; 
font-size: 1.1em; 
/*text-align: center; - Delete this line */ 
margin: 0 auto; /*Add this line*/ 
display: block; /*Add this too*/ 
line-height: 1; 
} 

Answer 4

display:inline-block; 

ou

display:block; 

à votre point d'ancrage alors vous serez en mesure de modifier sa largeur et il ight, et si vous voulez masquer le contenu de plus vous pouvez utiliser:

overflow:hidden; 

ou vous pouvez utiliser CSS3 et déformer le mot à votre largeur:

word-wrap: break-word; 

this helps