相对于 CSS 中的可用空间居中文本答案

【问题标题】：Centre Text Relative to Available Space in CSS相对于 CSS 中的可用空间居中文本
【发布时间】：2010-09-18 18:14:55
【问题描述】：

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

【问题讨论】：

标签： html css xhtml positioning

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

这是 CSS 的一个普遍问题示例，即无法计算各种布局中的“剩余空间”。

我遇到过您 (a) 需要精确布局，以及 (b) 您不知道浮动项的大小的情况。

例子：

[----占用100%剩余空间的输入字段----][未知宽度的按钮]

您会认为这是可能的，但 AFAIK，您必须使用表格来实现这一点。 CSS 中甚至没有关于将来如何解决此问题的提案。叹息

【讨论】：