Comment centrer sans tenir compte d'un élément flottant?

Question

Dans le style d'une page, supposons que j'ai un élément que je veux flotter: à droite, et avant que j'ai un élément en ligne, je veux centrer horizontalement sans tenir compte de l'élément flottant. Je peux seulement l'obtenir au centre entre l'élément flottant et la marge; Je veux qu'il ignore l'élément flottant et le centre dans son conteneur.

<div class="container"> 
    <span class="headline">this Needs centering</span> 
    <span class="corner-tag">without regard to this<span> 
</div> 

Avec mon premier essai de styles:

.container {text-align: center; } 
.corner-tag { 
    border: 1px solid black; 
    float: right; 
} 

est ici le violon:

http://jsfiddle.net/szal/6zgbw/

Puis-je modifier les styles sans modifier le balisage pour y parvenir?

Answer 1

Sauf si vous devez absolument utiliser float:right; vous pouvez essayer quelque chose comme ceci:

.container { 
    text-align: center; 
    position: relative; 
} 
.container-tag { 
    border: 1px solid black; 
    position: absolute; 
    right: 0; 
} 

Voici jsFiddle: http://jsfiddle.net/6zgbw/2/

Answer 2

Vous pouvez le faire en prenant soit .headline ou .corner-tag sur le débit en utilisant le positionnement absolu:

.container { text-align: center; } 

.headline { 
    position: absolute; 
    z-index: 10; } 

.corner-tag { 
    position: relative; 
    z-index: 20; 
    border: 1px solid black; 
    float: right; } 

violon: http://jsfiddle.net/6zgbw/1/