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

Есть ряд методов, перечисленный here

Однако, если вы просто хотели «спасенный» текст по центру, я думаю, что вам нужно, чтобы дать ширину #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 нет даже предложения о том, как это будет исправлено в будущем. sigh