在 CSS 中以动态宽度居中内联块

Posted 2023-03-06

【中文标题】在 CSS 中以动态宽度居中内联块

【英文标题】：Center inline-blocks with dynamic width in CSS

【发布时间】：2012-03-03 23:35:58

【问题描述】：

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

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

这使得内部 div 并排排列。但这意味着根据浏览器的宽度以及可以并排放置多少个 div 而不会中断到下一行，会留下一些空白。

要了解我的目标，请打开您的 Google Chrome 新标签页并拖动您的浏览器窗口以使其更小。你会看到，当你走得太远时，一些 chrome 应用会撞到下一行，但它仍然保持居中。

在我的例子中，他们碰到下一行并变得不居中。

这是我的代码的样子：

<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 并排，除非没有足够的空间，在这种情况下，最后一个会撞到下一行，同时保持在父 div 的中心。

感谢您的帮助。

【参考方案1】：

如果我理解你正确地将text-align: center 添加到你的.wrapper 样式应该会产生预期的效果。有关示例，请参阅this fiddle。调整结果面板的大小以观察框的重新排序。

就像 Akaishen 已经提到的 inline-blocks 像文本一样流动。这就是您可以控制它们与text-align 对齐的原因。但是，如果您想对布局进行非常精细的控制，使用 inline-blocks 可能会遇到问题。因为它们像文本一样流动，它们之间的空白例如不会被忽略。不幸的是，您无法真正确定跨浏览器和操作系统的空间的绝对宽度。我的示例中的块之间的间隙是由此引起的。

【讨论】：

这正是我想要的！现在这更像是一种技巧而不是正确的方法吗？

@jake 这不是 hack，请参阅上面的解释

我知道这不是黑客行为。我过去曾使用过它，但我什至没有想过要使用它。我不应该说“hack”，我的意思是必须有更好的方法来做到这一点。但就目前而言，我认为这是最好的方法。

【参考方案2】：

当您使用display: inline-block 时，<div> 标签本质上是内联元素，可以这样设置样式。 text-align: center 将使每个元素居中。此时，您需要一个容器/包装器来定义最大和最小宽度。

可能有更好的方法来实现您正在寻找的东西，这与 Chrome 窗口的工作方式并不完全相同，尽管这是一个开始：fiddle

【讨论】：

谢谢！是的，我认为有更好的方法。将来可能与css3 box-flex有关。

回答您对 raphinesse 的问题，这不是 hack。但是，IE7 没有在非内联元素上实现内联块。 <div> 标签不是自然的内联元素。在 IE7 中，您将获得一系列垂直框。你可以阅读更多关于它的信息here。祝你好运！