html - 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#one を中央に配置したいと思います。

Answer 1

ここにリストされている多くのテクニックがあります

ただし、単に「保存された」テキストを中央に配置したい場合は、#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 2

それを行うには、さらにいくつかの方法があります。

<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 3

これはCSSの一般的な問題の例であり、さまざまなレイアウトで「残りのスペース」を計算する方法がないということです。

（a）正確なレイアウトが必要な状況、および（b）フローティングアイテムのサイズがわからない状況に遭遇しました。

例：

[----残りのスペースを100％使用する入力フィールド----][幅が不明なボタン]

これは可能だと思うかもしれませんが、AFAIKでは、これを実現するにはテーブルを使用する必要があります。CSSには、これが将来どのように修正されるかについての提案すらありません。はぁ