如何将一个元素居中定位，另一个浮动在同一行上答案

【问题标题】：how to position an element centrally and another floating right on the same line如何将一个元素居中定位，另一个浮动在同一行上
【发布时间】：2013-07-12 00:26:41
【问题描述】：

在页面的最底部，我有这个标记：

<footer class="general">
    <span class="fr">&copy; Copyright 2013</span>
    <h3>Stuff written here</h3>
</footer>

“fr”类使元素向右浮动。我真正想要实现的是将标题和跨度放在同一条线上，但我希望跨度向右浮动，并且标题相对于整个宽度居中，而不是在左边缘和跨度之间（这是我目前的情况）。

具体的 CSS 代码：

.general
{
    margin: 5px 0;
    text-align: center;
    text-transform: uppercase;
}

.fr
{
    float: right;
}

【问题讨论】：

标签： css css-position

【解决方案1】：

给h3添加一些样式怎么样？

This works 我：

.general
{
    margin: 5px 0;
    text-align: center;
    text-transform: uppercase;
}
.general h3
{
    width:250px;
    margin: 5px auto;
}
.fr
{
    float: right;
}

【讨论】：

【解决方案2】：

尝试使用这个 CSS：

.general {
    position:relative;
}
.fr {
    position:absolute;
    right:0;
}
.general h3 {
    text-align:center;
    margin:0;
}

jsFiddle example

通过将.fr 类从float:right 更改为position:absolute; right:0，您可以将其从文档流中移除，这样h3 元素就可以居中而不受跨度的影响。

【讨论】：

我真的很想避免绝对定位，因为我的大部分定位都使用 .fr/fl 类，所以事情可能会变得一团糟。同样从我读过的内容来看，这通常是不好的做法，并不是真正的解决方法。如果我不能修复它，否则我会使用它，但非常感谢。