在CSS中置中动态宽度的行内嵌块 [英] Center inline-blocks with dynamic width in CSS

问题描述

所以..我有一个动态宽度页面。下面，包装器div将其中的div。但是，每个div具有以下样式：

So.. I have a dynamic width page. Below, the wrapper div centers the divs inside of it. However, each div has a style of:

display:inline-block;
width:400px; /* static */

这使得内部div，并排。但是这意味着有一些空白留给我们，取决于浏览器的宽度和多少个div可以并排而不打破到下一行。

This makes the inside divs, side by side. But that means that there is some whitespace left over depending on the width of the browser and how many divs can go side by side without breaking to the next line.

打开Goog​​le Chrome新标签页，然后拖动浏览器窗口使其变小。你会看到，当你走得太远，一些chrome应用程序下降到下一行，但它仍然保持中心。

To get an idea of what I am going for, open up your Google Chrome New Tab page and drag your browser window to make it smaller. You will see that when you go too far, some of the chrome apps bump to the next line BUT it still stays centered.

在我的情况下，他们碰到下一个

In my case, they bump to the next line and become not centered.

这是我的代码：

<div class="wrapper">
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
</div>

我想要内侧的div并排，除非没有足够的空间，

I want the inside divs to be side by side unless there is not enough room in which case the end one will bump to the next line down, ALL while staying centered in the parent div.

感谢任何帮助。

推荐答案

如果我理解你正确添加 text-align：center 到你的 .wrapper styles应该给出所需的效果。有关示例，请参见这个小提示。调整结果面板大小以观看框的重新排序。

If I understood you correctly adding text-align: center to your .wrapper styles should give the desired effect. See this fiddle for an example. Resize the result panel to watch the reordering of the boxes.

像Akaishen已经提到的 inline-blocks 这就是为什么你可以通过 text-align 来控制它们的对齐方式。然而，如果你想要非常精细地控制你的布局，你可能会遇到问题使用 inline-blocks 。由于它们像文本一样流动，因此它们之间的空格不会被忽略。不幸的是，你不能真正确定跨浏览器和操作系统的空间的绝对宽度。在我的例子中的块之间的差距是由这种。

Like Akaishen already mentioned inline-blocks flow like text. That's why you can control their alignment with text-align. However if you want very fine control over your layout you might run into problems using inline-blocks. Since they flow like text whitespace between them is not ignored for instance. And unfortunately you can't really determine the absolute width of a space across browsers and OSs. The gaps between blocks in my example are caused by this.

这篇关于在CSS中置中动态宽度的行内嵌块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！