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

Posted 2023-03-05

【中文标题】试图在 CSS 中将内容放在左侧的一列居中 [重复]

【英文标题】：Trying to center one column with content to the left in CSS [duplicate]

【发布时间】：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 只是父级的宽度未知，所以无法设置任何固定的像素大小

【参考方案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>

【讨论】：

效果很好，谢谢！