居中与左对齐

这几天在做一个小页面中需要实现这样一种排版

A, B两个区域 ,A页面居中, B左端对齐A左 端

原本我是让A text-align:center; 后通过Javascript让B对齐A.后面寻思不依赖JavaScript的方法,陷入 flexbox 中各种尝试一番,无果.

经过和同事讨论,学习到了仅使用CSS解决这个问题的排版方法(当A的宽度超过B的情况下):

这种实现的关键是利用了inline-block “宽度收缩” 的特性,使得包含A,B的最近一层父节点宽度收缩为A的宽度.