将一个浮动的右边和一个浮动的左边的div对齐 [英] centering a div between one that's floated right and one that's floated left

问题描述

我有一个页面，其中一个标题包含三个div - 一个浮动在左边，一个浮动在右边，一个在它们之间。我想要中心div居中，但悲伤 float：center 不存在，我不能只是浮动到左边，并添加填充，因为它必须根据窗口大小更改。

有什么简单的东西我忽略了吗？

更新：

此外，我想找到一个

解决方案

如果你有两个浮动的div，那么你知道边距。问题是 float：right div应该放在中间div之前。所以基本上你会有：

left-floated |右浮动|

现在，关于边距：通常你可以使用 margin：0 auto 问题是，现在你知道边距的值：浮动的div！所以你只需要使用：

margin：0 right-floated-width 0 left-floated-width / p>

这应该可以工作。

年后编辑

同时，一个新的玩具在镇上：flexbox。该支持是相当不错（即如果您不需要支持低于IE 10）和

您可以看到一个非常好的flexbox指南此处。您需要的示例是：此处。

I have a page in which a header consists of three divs - one that's floated to the left, one that's floated to the right, and one that's in between them. I'd like for that central div to be centered, yet sadly float: center doesn't exist and I can't just float it to the left and add padding as it'd have to change depending on the window size.

Is there something simple I'm overlooking? Or how would I do such a thing?

Update:
In addition, I'd like to find a way of centering that middle div in the space between the divs in case that looks better.

解决方案

If you have two floated divs, then you know the margins. The problem is that the float:right div should be put before the middle div. So basically you will have:

left-floated | right-floated | centered

Now, about the margins: usually you can just use margin:0 auto, right? The problem is that right now you know the values of the margins: floated divs! So you just need to use:

margin:0 right-floated-width 0 left-floated-width

That should work.

Years later edit

Meanwhile, a new toy is in town: flexbox. The support is fairly good (i.e. if you don't need to support lower than IE 10) and the ease of use is way over floats.

You can see a very good flexbox guide here. The example you need is right here.

这篇关于将一个浮动的右边和一个浮动的左边的div对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！