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#one 在父 div 的左边缘和提交按钮的左边缘之间的空间中居中。

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 中甚至没有关于将来如何解决此问题的提案。叹