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

Трудно сказать, что текст saved не центрирован между левым краем контейнера 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 даже нет предложения о том, как это будет исправлено в будущем. Вздох