中心文本相對於可用空間在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＃之一在父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一個普遍的問題，這是沒有辦法來計算各種佈局的「剩餘空間」的一個例子。

我遇到了您（a）需要確切佈局，以及（b）您不知道浮動項目大小的情況。

實施例：

[----，是以剩餘空間的100％輸入字段----] [未知寬度的按鈕]

你會認爲，這是可能的，但AFAIK，你必須使用表來實現這一點。 CSS中甚至沒有提出如何在未來解決這個問題的提案。 嘆息