CSS -Positionierung - schwebende linke und zentrierte Ausgabe

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

  •  23-09-2019
  •  | 
  •  

Frage

Ich bin mir sicher, dass dies eine grundlegende Frage für diejenigen unter Ihnen ist, die regelmäßig in HTML und CSS arbeiten.

Ich habe zwei Textstücke, beide müssen in derselben Zeile erscheinen - einer muss ausgerichtet sein, und der andere muss zentriert sein, unabhängig davon, wie viel Text im links ausgerichteten Block ist (offensichtlich die Länge der Länge Der links ausgerichtete Text erstreckt sich nicht über die halbe Strecke.

Um dies zu erleichtern und zu testen, habe ich eine Probe aufgenommen. In meiner Probe habe ich das, was ich brauche, aber auf 2 Zeilen anstelle derselben Linie.

Bitte geben Sie das funktionierende Beispiel erneut neu, wenn Sie eine Lösung finden.

Vielen Dank.

<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>

War es hilfreich?

Lösung 

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

Andere Tipps

Y. Shohams Lösung funktioniert. Hier ist ein anderer, der das Verpackungsinhalt anmutiger umrundet (keine Überlappung zwischen Mitte und linkem Abschnitt), aber für die Änderung der Reihenfolge der Elemente im Markup erforderlich ist: 

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

(Das text-align: left Möglicherweise macht es keinen Unterschied, z. B. wenn keine Breite angegeben ist und nichts innerhalb einer inhärenten Breite wie einem Bild hat.)

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top