Centrer le texte par rapport à l'espace disponible en 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 # one soit centré dans l'espace situé entre le bord gauche du div parent et le bord gauche du bouton d'envoi.

Answer 1

Quelques autres moyens 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 d'envoi.

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 existe un certain nombre de techniques répertoriées ici

.

Toutefois, si vous souhaitez simplement utiliser le " enregistré " Pour centrer le texte, je pense que vous devrez 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 de problème général avec CSS, selon lequel il n’existe aucun moyen de calculer «l’espace restant» dans différentes mises en page.

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

Exemple:

  

[---- champ de saisie prenant 100% de l'espace restant ----] [bouton de largeur inconnue]

Vous penseriez que cela était possible, mais autant que je sache, vous devez utiliser des tableaux pour y parvenir. Il n'y a même pas de proposition en CSS pour résoudre ce problème à l'avenir. soupir