Centra testo relativo allo spazio disponibile in CSS
-
04-07-2019 - |
Domanda
<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.
Soluzione
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>
Altri suggerimenti
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>
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