CSS：尽管旁边有浮动元素，如何使文本居中？

Posted 2023-03-05

【中文标题】CSS：尽管旁边有浮动元素，如何使文本居中？

【英文标题】：CSS: How can I center text despite a floating element beside it?

【发布时间】：2011-10-12 17:22:15

【问题描述】：

基本上，我想将文本居中，忽略任何浮动的兄弟元素。

起初，我认为这不是问题，因为我的印象是浮动元素不会占用任何兄弟元素的宽度。

Example（我希望红色文本位于蓝色框的中心，尽管是绿色文本）

如何做到最好？

【参考方案1】：

这是一个工作小提琴的链接：http://jsfiddle.net/cD657/3/

（在您的示例中，您打开了一个<span>，然后用</div> 关闭它）

我把它做成了一个 div 并给了它margin: 0px auto; 和一个宽度。 - 似乎成功了

【讨论】：

但是当你没有固定宽度的时候呢？基本上，当您不知道任何一个元素的宽度时，您就无法做到这一点：浮动的元素或要居中的文本。我现在刚刚遇到这个问题并寻找解决方案，但没有运气。我有一个按钮和一个文本，都在同一个 DIV 中。我希望按钮与左侧对齐，并将文本与父级（DIV）的中心对齐。我尝试在按钮上使用绝对定位并在父 div 上使用 text-align:center 并且它有效，但是当文本较大时，它会在按钮后面:(

【参考方案2】：

你不能。如果它在父框内居中，则浮动将在某个点与内容重叠，这将破坏浮动点。您可以在此处使用两种方法。如果您知道浮动的宽度，则可以应用相等的负右边距。否则，您可以绝对定位元素like this。

【讨论】：

我能想到的唯一其他选择是制作一个相同大小的对象（例如，不可见 div）并将其浮动到父容器的另一侧（包含其他烦人的浮动） .这比使用边距平衡居中要好，因为浮动对象即使不在与文本相同的容器中也会影响文本居中。想法？非常适合我。

我喜欢你的想法：否则，你绝对可以像这样定位元素。

是的，定位绝对内部相对就可以了

@Slink 你的平衡不可见 div 想法对我来说效果很好......如果你把它作为答案，我会赞成。

【参考方案3】：

您可以保持原样，但只需在另一侧添加与浮动元素宽度相同的像素值的填充。

.parent        
    text-align: center;

.centered.element
     padding-left: [width of floating element]px;


.floating.element
     float: left;

要轻松找到宽度，只需在任何现代浏览器中使用 Developer Tools 到 Inspect 元素即可。

在此处查看小提琴：http://jsfiddle.net/cD657/369/

注意：如果居中的元素具有指定的background 颜色，这可能不起作用。