试图在 CSS 中将内容放在左侧的一列居中 [重复]答案

【问题标题】：Trying to center one column with content to the left in CSS [duplicate]试图在 CSS 中将内容放在左侧的一列居中 [重复]
【发布时间】：2017-11-11 03:00:10
【问题描述】：

我有一个要实现的设计，它应该有一个居中的快捷方式列，然后每个左侧都有一个文本。它应该如下所示：

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

我无法让它与响应式设计一起使用。我的标记是 ATM 这个：

<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>

而当前的 CSS，它根本不能完美地居中，是这样的：

.ax-learn__shortcuts {
  display: flex;
  flex-direction: column;
}

.ax-learn__shortcuts h2 {
  text-align: center;
}

.ax-learn__shortcuts-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

这是Codepen上的一个例子

【问题讨论】：

你想用这个实现什么响应式设计？
1 票赞成漂亮的图片解释
@Senthe 只是父级的宽度未知，所以无法设置任何固定的像素大小

标签： css flexbox

【解决方案1】：

使用没有边框的表格进行对齐，并给它一个相对宽度，以便它可以缩放到屏幕大小。

【讨论】：

【解决方案2】：

通过添加一个伪元素作为 ghost 元素，它与左侧的标签匹配，您可以将该标签和左侧标签设置为 flex: 1，它们将占用所有可用空间并留下kbd 在中间。

然后text-align: right 用于标签，margin: 0 10px 用于kbd，它看起来也不错:)

我添加了这些规则来实现这一点。

.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;
}

Updated codepen

堆栈sn-p

.ax-learn__shortcuts-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.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__shortcuts {
  display: flex;
  flex-direction: column;
}
.ax-learn__shortcuts kbd {
  padding: 7px 15px;
  border: 2px solid black;
  border-radius: 5px;
  background: white;
  display: inline-block;
}
.ax-learn__shortcuts kbd:first-of-type {
  margin-right: 15px;
}
.ax-learn__shortcuts kbd:last-of-type {
  margin-left: 15px;
}
.ax-learn__shortcuts h2 {
  text-align: center;
}

<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>    
</div>

【讨论】：

效果很好，谢谢！