Positionnement CSS - numéro flottant gauche et centré

Je suis sûr que c'est une question de base pour ceux d'entre vous qui travaillent en HTML et CSS régulièrement. J'ai deux parties de texte, les deux doivent apparaître sur la même ligne - l'un doit être aligné à gauche, et l'autre doit être centré, quelle que soit la quantité de texte dans le bloc aligné à gauche (évidemment la longueur du texte aligné à gauche ne s'étend pas sur la marque à mi-chemin). Pour faciliter la compréhension et le test, j'ai inclus un échantillon. Dans mon échantillon, j'ai ce dont j'ai besoin, mais sur 2 lignes au lieu de la même ligne.Positionnement CSS - numéro flottant gauche et centré

Veuillez replacer l'échantillon de travail si vous trouvez une solution.

Merci.

<html> 
<head> 
    <title>Alignment Test</title> 
    <style> 
     body {background-color: #E6E6E6;} 
     #reference {width: 100%; 
        border: solid 1px navy;} 
     #half1 {width: 50%; 
       text-align: right; 
       border-right: dotted 1px navy} 
     #container {width: 100%; 
        text-align: center; 
        border: solid 1px navy;} 
     #floatLeft {float:left; 
        border: dotted 1px green; 
        background-color: #D0F5A9;} 
     #centered {width: 100%; 
         border: dotted 1px red; 
         background-color: #F5F6CE;} 
    </style> 
</head> 
<body> 
    <div id="reference"> 
     <div id="half1">Middle of container -->&nbsp;</div> 
     <div id="half2"></div> 
    </div> 
    <div id="container"> 
     <div id="centered">This text should be centered 
      <div id="floatLeft">This text should be left aligned</div> 
     </div> 
    </div> 
</body>

Source

2010-01-27 Sean

<div style="text-align:center;position:relative"> 
    Centered 
    <div style="position:absolute;left:0;top:0">Left</div> 
</div>

Source

2010-01-27 10:50:32

Merci Y. Cela m'a donné le résultat que je cherchais. La position du conteneur devait être définie (à relative) à quel point la position absolue du contenu gauche y était alors contenue. Parfait. – Sean

solution de Y. Shoham fonctionne. Voici une autre, qui gère le contenu d'emballage plus de grâce (ne permet pas de chevauchement entre le centre et la section de gauche), mais qui nécessite une modification de l'ordre des éléments dans le balisage:

<div style="text-align: center; overflow: auto;"> 
    <div style="float: left; text-align: left;">left</div> 
    centered 
</div>

(Le text-align: left ne peut pas faire une différence, par exemple, s'il n'y a aucune largeur spécifiée et rien à l'intérieur a une largeur inhérente, comme une image.)

Source

2010-01-27 11:03:35 Anonymous

Cela prend également en considération (en termes de largeur) l'élément flottant lors du centrage du texte .. de sorte que le texte centré sera centré dans le reste de la div conteneur .. –

@Gaby: C'est vrai. – Anonymous

C'est vrai - et c'est exactement ce que j'essayais d'éviter. Peut-être n'ai-je pas prononcé la question clairement, mais j'aimerais que le texte centré reste centré dans le conteneur quel que soit l'espace restant ... Si vous copiez mon code d'en haut et que vous implémentez votre solution, vous obtenez un Une seule ligne, mais le texte «centré» ne sera pas central par rapport à la ligne au-dessus qui se démarque au milieu du conteneur. – Sean

Positionnement CSS - numéro flottant gauche et centré

Répondre

Questions connexes