将未知宽度的 div 居中，同时在内部保持左对齐答案

【问题标题】：Center a div of unknown width, while mantining left align inside将未知宽度的 div 居中，同时在内部保持左对齐
【发布时间】：2022-04-08 18:26:04
【问题描述】：

这是我的 html/css 代码。请水平移动边框，直到最后一行包含的元素少于上面的行。

http://jsfiddle.net/wb5kT/

问题从这里开始。我确实想将整个东西水平居中，所以从页面边框到文本的左右距离是相同的。但是，最后一个可见行应该左对齐。我事先不知道视口的宽度或元素总数。

在 .images 中添加“text-align: left”会将最后一行中的元素向左对齐，但会破坏整个“居中对齐”。示例：http://jsfiddle.net/dgLQC/1/

不使用表格可以吗？

IE 8以下及其他浏览器的旧版本可以忽略。

【问题讨论】：

标签： html css text-align mantine

【解决方案1】：

我认为即使使用表格也无法做到这一点；一旦您的内容对于容器来说太宽，容器将采用其父级的宽度，即使内容恰好被包裹以适应较小的宽度。

顺便说一句，要确保最后一行（假设不止一行）元素不完整，请选择素数的元素。

【讨论】：

【解决方案2】：

将float:left 放入.thumb。

看到这个，http://jsfiddle.net/C5Pev/

更新：

我的错，上面的代码没有按预期工作。一种可能的解决方法是，

http://jsfiddle.net/C5Pev/7/

【讨论】：

看看你的小提琴。内容不再以视觉为中心。从左边框到第一个文本的范围小于从右边框到第一个文本的范围。
对不起，我的错。已经是半夜了，我没有注意到。根据您的情况，可能有几种解决方法。我没有找到一种适用于所有情况的方法。一种可能的解决方法是使用百分比宽度。我在更新中给出了一个例子。请参阅 jsfiddle 链接。
这行得通，但我想在行中放置尽可能多的元素。

【解决方案3】：

不确定我是否正确理解了您的问题，但似乎您需要将最后一行（两个 div）内的文本向左对齐，同时使所有其他文本居中：

您可以为此申请一个课程：

.alignLeft {
    text-align: left;
}

并将该类分配给最后两个 div。

这里是Fiddle Example!

已编辑：

您的问题应该重新表述，它会导致对您的目标的错误结论，但这就是您要寻找的：

看到这个Fiddle Example!

相关 CSS 更新：

.thumb {
  float: left;              // align divs to the left of each other
  text-align: center;       // center text inside the div
  position: relative;
  border: 1px solid #D9D9D9; // view the blocks, not needed
  margin: 1px;               // get some distance between blocks, not needed
  font-size: 10px;           // small text to view that's centered, not needed
}

提示： 水平收缩，直到你得到 3 个块的行，因此有两个 div 与文本 我在最后一行！ 单独在最后一行。

【讨论】：

我想对齐最后一个 div，而不是它们的内容。而且我不知道“最后一行”中有多少 div，这取决于用户窗口的宽度。