positionnement CSS - Floating gauche et centrée question

StackOverflow https://stackoverflow.com/questions/2146145

  •  23-09-2019
  •  | 
  •  

Question

Je suis sûr que cela est une question fondamentale à ceux d'entre vous qui travaillent en HTML et CSS régulièrement.

J'ai deux morceaux de texte, les deux doivent apparaître sur la même ligne - il faut être aligné à gauche, et les autres besoins de centrer, quelle que soit la quantité de texte est dans le bloc aligné à gauche (évidemment alors que la longueur du texte aligné à gauche ne se prolonge pas au-dessus de la marque à mi-chemin).

Pour faciliter la compréhension et le test, j'ai inclus un échantillon. Dans mon exemple, j'ai ce que je dois, mais sur 2 lignes au lieu de la même ligne.

S'il vous plaît rediffuser 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>

Était-ce utile?

La solution 

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

Autres conseils

Y. La solution de 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 la différence, par exemple, s'il n'y a pas de largeur spécifiée et rien à l'intérieur a une largeur inhérente, comme une image.)

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top