Центрировать текст относительно доступного пространства в 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>

Я бы хотел, чтобы div#one располагался по центру пространства между левым краем родительского div и левым краем кнопки отправки.

Answer 1

Еще несколько способов сделать это:

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

Трудно сказать, что текст сохраненный не центрирован между левым краем контейнера div и левым краем кнопки отправки.

Вот точная версия вышеупомянутого:

<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

В списке приведен ряд методов

.

Однако, если вы просто хотите, чтобы " сохраненный " текст для центрирования, я думаю, вам нужно будет присвоить ширину #one, например.

<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

Это пример общей проблемы CSS: невозможно вычислить «оставшееся пространство» в различных макетах.

Я сталкивался с ситуациями, когда вам (а) нужен точный макет и (б) вы не знаете размер плавающего элемента.

Пример:

[---- поле ввода, занимающее 100% оставшегося места ----] [кнопка неизвестной ширины]

Вы могли бы подумать, что это возможно, но, AFAIK, для этого вам придется использовать таблицы.В CSS даже нет предложений о том, как это можно исправить в будущем. вздох