尝试在CSS中将内容放在左侧的一列居中

我有一个要实现的设计，应该有一列中间的快捷方式，然后在每个快捷方式的左边有一个文本。 应该是这样的：

快捷方式列应在标题下方居中

我不能让它与响应性设计一起工作。 我的标记如下：

<div class="ax-learn__shortcuts">
 <h2>Learn shortcuts</h2>
 <div class="ax-learn__shortcuts-row">
   <div>Go to home:</div>
   <div><kbd>g</kbd>then<kbd>h</kbd></div>
 </div>
 <div class="ax-learn__shortcuts-row">
   <div>Go to search:</div>
   <div><kbd>g</kbd>then<kbd>s</kbd></div>
 </div>
 <div class="ax-learn__shortcuts-row">
   <div>Go to learn:</div>
   <div><kbd>g</kbd>then<kbd>l</kbd></div>
 </div>    

这是一个关于

< P>的例子，通过添加一个伪的Fhost元素，与左边的标签匹配，可以将那个和左边的标签设置为<代码> Flex：1 < /Cl>，它们将占据所有可用的空间，并在中间留下“代码”> KBD 。 然后

text align:right

用于标签，

kbd

的

边距：0 10px

也会很好看：）

我添加了这些规则，以实现这一点

.ax-learn__shortcuts-row::after {
  content: '';
}
.ax-learn__shortcuts-row::after,
.ax-learn__shortcuts-row div:nth-child(1) {
  flex: 1;
}
.ax-learn__shortcuts-row div:nth-child(1) {
  text-align: right;
}
.ax-learn__shortcuts-row div:nth-child(2) {
  margin: 0 10px;
}

堆栈片段

.ax-learn\uuu-row{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.ax-learn\u-row:：之后{
内容：''；
}
.ax-learn\u-row:：之后，
.ax-learn\uU-row分区：第n个子项（1）{
弹性：1；
}
.ax-learn\uU-row分区：第n个子项（1）{
文本对齐：右对齐；
}
.ax-learn\uU-row分区：第n个子项（2）{
利润率：0.10px；
}
.ax-learn\u快捷方式{
显示器：flex；
弯曲方向：立柱；
}
.ax-learn\uuuuu快捷方式kbd{
填充：7px 15px；
边框：2件纯黑；
边界半径：5px；
背景：白色；
显示：内联块；
}
.ax-learn\uuu快捷方式kbd:类型的第一个{
右边距：15px；
}
.ax-learn\uu快捷键kbd:类型的最后一个{
左边距：15px；
}
.ax-learn\uuu快捷方式h2{
文本对齐：居中；
}

学习捷径
回家：
第三
转到搜索：
鸡
去学习：
丁醇

使用无边框的表格进行对齐，并给它一个相对宽度，这样它就可以根据屏幕大小进行缩放。

你想用它实现什么样的响应设计？1票赞成漂亮的图片explanation@Senthe只是因为父对象的宽度未知，所以我无法设置任何固定的像素大小。这非常有效，谢谢！

.ax-learn__shortcuts-row::after {
  content: '';
}
.ax-learn__shortcuts-row::after,
.ax-learn__shortcuts-row div:nth-child(1) {
  flex: 1;
}
.ax-learn__shortcuts-row div:nth-child(1) {
  text-align: right;
}
.ax-learn__shortcuts-row div:nth-child(2) {
  margin: 0 10px;
}