Center Text Relativ zum verfügbaren Raum 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>

Ich möchte div # one in den Raum zwischen dem linken Rand des übergeordneten div und dem linken Rand des Submit-Button zentriert werden.

Answer 1

Ein paar mehr Möglichkeiten, es zu tun:

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

Es ist schwer zu sagen, dass der Text saved nicht zwischen dem linken Rand des Behälters div und dem linken Rand des Submit-Button.

zentriert ist

Hier ist eine genaue Version der oben:

<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

Es gibt eine Reihe von Techniken aufgeführt hier

Wenn Sie jedoch einfach der „gerettet“ Text zentriert werden wollen, ich glaube, Sie werden eine Breite geben müssen, um #ONE, z.

<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

Dies ist ein Beispiel für ein generelles Problem mit CSS, das ist, dass es keine Möglichkeit gibt, die ‚den Platz‘ in verschiedenen Layouts zu berechnen.

Ich habe Situationen läuft in dem Sie (a) ein genaues Layout benötigen, und (b) wenn Sie nicht wissen, die Größe des Schwimmelementes.

Beispiel:

  

[---- Eingabefeld, das 100% des verbleibenden Platzes in Anspruch nimmt ----] [Taste unbekannter Breite]

Sie würden denken, dass dies möglich ist, aber AFAIK, haben Sie Tabellen zu verwenden, um dies zu erreichen. Es gibt nicht einmal einen Vorschlag in CSS, wie dies würde in der Zukunft festgelegt werden. seufzen