Css 如何使内联块居中？

如何使绿色框（

.b

）紧紧围绕其内容物，使其水平居中

.c{
背景颜色：蓝色；
保证金：5px；
高度：100px；
显示：内联块；
}
.a{
边框：1px纯红；
}
.b{
保证金：0自动；
边框：1px纯绿色；
}
身体{
填充：50px；
}

x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x

这是一个解决方案，它不会使.b变小以适应所有的.c，但会使.c稍微拉伸以避免出现空白

更新

我添加了一些媒体查询，以确保所有元素始终保持相同的宽度。当然，这是基于精确值，因此对于一般解决方案，我们可能需要包括

calc

或一些变量

*{
框大小：边框框；
}
c{
背景颜色：蓝色；
保证金：5px；
高度：100px；
最小宽度：80px；
弹性：1；
显示：内联块；
}
.a{
边框：1px纯红；
显示器：flex；
}
.b{
保证金：0自动；
边框：1px纯绿色；
显示器：flex；
柔性包装：包装；
}
b:之后{
内容：“；
弹性：1；
}
@介质和全部（最大宽度：1110px）{
b:之后{
保证金：5px；
}
}
@介质和全部（最小宽度：1020px）和（最大宽度：1110px）{
b:之后{
弹性：10；
}
}
@全部介质和（最小宽度：930px）和（最大宽度：1020px）{
b:之后{
弹性：7.75；
}
}
@全部介质和（最小宽度：840像素）和（最大宽度：930像素）{
b:之后{
弹性：5.5；
}
}
@介质和全部（最小宽度：750px）和（最大宽度：840px）{
b:之后{
弹性：3.25；
}
}
@介质和全部（最小宽度：570px）和（最大宽度：660px）{
b:之后{
弹性：4.33；
}
}
身体{
填充：50px；
}

x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x

正如我在评论中提到的，我不确定是否可以单独使用CSS来完成，我创建了一个快速的JS/jQuery解决方案，根据第一行内容计算宽度

函数resizeGrid（）{
var-rowPos=0；
var-col=0；
$（'.b'）.removeAttr（'style'）；
$（'.c'）。每个（函数（）{
var thisRowPos=$（this）.offset（）.top；
如果（thisRowPos！=rowPos）{
如果（rowPos！=0）{
/*打破$.each（）循环*/
返回false；
}否则{
col++；
}
rowPos=此rowPos；
}否则{
col++；
}
});
$（'.b'）.css（'width'，$（'.c'））.outerWidth（true）*col+'px'）；
console.log（'列数：'+col）；
}
$（窗口）.on（'resize'，resizeGrid）；
调整网格大小（）
*{
-moz框大小：边框框；
-ms框尺寸：边框框；
-o型盒尺寸：边框盒；
-webkit框大小：边框框；
框大小：边框框；
}
.a{
边框：1px纯红；
}
.b{
保证金：0自动；
背景：浅绿色；
}
b:之后{
内容：''；
显示：块；
宽度：100%；
身高：0；
明确：两者皆有；
}
c{
填充物：5px；
高度：100px；
显示：内联块；
浮动：左；
}
c.表格{
背景颜色：蓝色；
身高：100%；
宽度：100%；
浮动：左；
}
.c表td{
垂直对齐：顶部；
}
身体{
填充：50px；
}

x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
x x x x
似乎什么也没做：@mpen全速前进。。Y