Centra testo relativo allo spazio disponibile in CSS

Question

<div style="width: 300px">
<div id="one" style="float: left">saved</div><input type="submit" id="two" style="float: right" value="Submit" />
</div>

Vorrei che div # uno fosse centrato nello spazio tra il bordo sinistro del div genitore e il bordo sinistro del pulsante di invio.

Answer 1

Alcuni altri modi per farlo:

<div style="width: 300px">
    <input type="submit" id="two" style="float: right" value="Submit" />
    <div id="one" style="text-align:center;">saved</div>
</div>

È difficile dire che il testo salvato non sia centrato tra il bordo sinistro del contenitore div e il bordo sinistro del pulsante di invio.

Ecco una versione esatta di quanto sopra:

<div style="width: 300px;">
    <input type="submit" id="two" style="float: right; width:64px;" value="Submit" />
    <div id="one" style="text-align:center;margin-right:64px;">saved</div>
</div>

Answer 2

Esistono diverse tecniche elencate qui

Tuttavia, se volevi semplicemente il " salvato " testo da centrare, penso che dovrai dare una larghezza a #one, ad esempio

<div style="width: 300px">
<div id="one" style="float: left;text-align:center;width:80%">saved</div>
<input type="submit" id="two" style="float: right;width:20%" value="Submit" />
</div>

Answer 3

Questo è un esempio di un problema generale con CSS, che è che non c'è modo di calcolare lo "spazio rimanente" in vari layout.

Mi sono imbattuto in situazioni in cui (a) è necessario un layout esatto e (b) in cui non si conosce la dimensione dell'elemento mobile.

Esempio:

  

[---- campo di input che occupa il 100% dello spazio rimanente ----] [pulsante di larghezza sconosciuta]

Penseresti che ciò fosse possibile, ma AFAIK, devi usare le tabelle per raggiungere questo obiettivo. Non c'è nemmeno una proposta in CSS su come ciò verrà risolto in futuro. sospirare