Texte central par rapport à l'espace disponible dans 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> 

Je voudrais que div # 1 soit centré dans l'espace entre le bord gauche du div parent et le bord gauche du bouton de soumission.

Answer 1

Quelques autres façons de le faire:

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

Il est difficile de dire que le texte saved n'est pas centré entre le bord gauche du conteneur div et le bord gauche du bouton soumettre .

Voici une version exacte de ce qui précède:

<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

Il y a un certain nombre de techniques énumérées here

Cependant, si vous vouliez simplement le « sauvé » texte à centrer, je pense que vous aurez besoin de donner une largeur à #ONE, par exemple

<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

Voici un exemple d'un problème général avec CSS, qui est qu'il n'y a aucun moyen de calculer le « espace restant » dans diverses dispositions.

J'ai rencontré des situations où (a) vous avez besoin d'une disposition exacte, et (b) où vous ne connaissez pas la taille de l'élément flottant.

Exemple:

[---- champ d'entrée qui prend 100% de l'espace restant ----] [bouton de largeur inconnue]

On pourrait penser que cela était possible, mais AFAIK, vous devez utiliser des tables pour y parvenir. Il n'y a même pas de proposition en CSS pour savoir comment cela serait réglé à l'avenir. sigh