Domanda

Sono sicuro che questa è una questione fondamentale per quelli di voi che lavorano in HTML e CSS regolarmente.

Ho due parti di testo, sia bisogno di apparire sulla stessa linea - uno ha bisogno di essere allineato a sinistra, e l'altro ha bisogno di essere centrato, a prescindere da quanto il testo è nel blocco allineato a sinistra (ovviamente mentre il lunghezza del testo allineato a sinistra non si estende oltre il segno a metà strada).

Per rendere questo più facile da capire e prova, ho incluso un campione. Nel mio esempio, ho quello che mi serve, ma su 2 linee al posto della stessa linea.

Si prega di ripubblicare il campione di lavoro se si trova una soluzione.

Grazie.

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

È stato utile?

Soluzione

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

Altri suggerimenti

Y. La soluzione di Shoham funziona. Ecco un altro, che gestisce il contenuto di avvolgimento con più grazia (non permette la sovrapposizione tra il centro e la sezione di sinistra), ma che richiede cambiando l'ordine degli elementi nella marcatura:

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

(La text-align: left non può fare la differenza, ad esempio, se non c'è larghezza specificata e niente ha all'interno una larghezza intrinseca, come un'immagine.)

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top