如何居中（居中）纯 css 列的内容

Question

该代码段显示了一系列包含单个字母的列。我希望字形的中心位于每个字形的中心，但如您所见，它们并没有完全居中——出现在右侧。（我怀疑是字形宽度的一半，但我不确定）。

我试过justify-content: center、margin: auto都没有用。检查纯净，我没有看到任何东西可以阻止我的目标。你能帮我修一下吗？

.centered-cols {
  justify-content: center;
}

.key {
  text-align: center;
  min-width: 1.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: lightgrey;
}

<link href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="q" class="pure-u-1-10 key"><p>A</p></div>
  <div id="w" class="pure-u-1-10 key"><p>B</p></div>
  <div id="e" class="pure-u-1-10 key"><p>C</p></div>
  <div id="r" class="pure-u-1-10 key"><p>D</p></div>
  <div id="t" class="pure-u-1-10 key"><p>E</p></div>
  <div id="y" class="pure-u-1-10 key"><p>F</p></div>
  <div id="u" class="pure-u-1-10 key"><p>G</p></div>
  <div id="i" class="pure-u-1-10 key"><p>H</p></div>
  <div id="o" class="pure-u-1-10 key"><p>I</p></div>
  <div id="p" class="pure-u-1-10 key"><p>J</p></div>
</div>

Answer 1

在您的 .key css class 中添加 letter-spacing: 0:

.key {
  letter-spacing: 0;
  text-align: center;
  min-width: 1.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: lightgrey;
}

<link href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="q" class="pure-u-1-10 key">
    <p>A</p>
  </div>
  <div id="w" class="pure-u-1-10 key">
    <p>B</p>
  </div>
  <div id="e" class="pure-u-1-10 key">
    <p>C</p>
  </div>
  <div id="r" class="pure-u-1-10 key">
    <p>D</p>
  </div>
  <div id="t" class="pure-u-1-10 key">
    <p>E</p>
  </div>
  <div id="y" class="pure-u-1-10 key">
    <p>F</p>
  </div>
  <div id="u" class="pure-u-1-10 key">
    <p>G</p>
  </div>
  <div id="i" class="pure-u-1-10 key">
    <p>H</p>
  </div>
  <div id="o" class="pure-u-1-10 key">
    <p>I</p>
  </div>
  <div id="p" class="pure-u-1-10 key">
    <p>J</p>
  </div>
</div>

Answer 2

Pure 通过在 pure-g CSS class.

中设置 letter-spacing: -.31em 来制造此问题

只需设置letter-spacing: normal !important;覆盖它：

.centered-cols {
  justify-content: center;
  letter-spacing: normal !important;
}

.key {
  text-align: center;
  min-width: 2.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: lightgrey;
}

<link href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="q" class="pure-u-1-10 key"><p>A</p></div>
  <div id="w" class="pure-u-1-10 key"><p>B</p></div>
  <div id="e" class="pure-u-1-10 key"><p>C</p></div>
  <div id="r" class="pure-u-1-10 key"><p>D</p></div>
  <div id="t" class="pure-u-1-10 key"><p>E</p></div>
  <div id="y" class="pure-u-1-10 key"><p>F</p></div>
  <div id="u" class="pure-u-1-10 key"><p>G</p></div>
  <div id="i" class="pure-u-1-10 key"><p>H</p></div>
  <div id="o" class="pure-u-1-10 key"><p>I</p></div>
  <div id="p" class="pure-u-1-10 key"><p>J</p></div>
</div>

Answer 3

只需删除 pure-g class

中的 letter-spacing: -.31em;

Answer 4

如果您想要等宽项目，请使用 CSS 网格，并且可以轻松地将它们居中：

.centered-cols {
  display:grid;
  width:max-content;
  margin:auto;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
}

.key {
  text-align:center;
  padding:0 .8em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: lightgrey;
}

<link href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" rel="stylesheet" />

<div class="centered-cols">
  <div id="q" class="key"><p>A</p></div>
  <div id="w" class="key"><p>B</p></div>
  <div id="e" class="key"><p>C</p></div>
  <div id="r" class="key"><p>D</p></div>
  <div id="t" class="key"><p>E</p></div>
  <div id="y" class="key"><p>F</p></div>
  <div id="u" class="key"><p>G</p></div>
  <div id="i" class="key"><p>H</p></div>
  <div id="o" class="key"><p>I</p></div>
  <div id="p" class="key"><p>J</p></div>
</div>

Answer 5

因为我们已经在 flexbox 的领域，像这样的东西也可以工作，而不需要 !important

.centered-cols {
  justify-content: center;
}

.key {
  display: flex;
  justify-content: center;
  letter-spacing: normal;
  min-width: 1.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: lightgrey;
}

<link href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="q" class="pure-u-1-10 key"><p>A</p></div>
  <div id="w" class="pure-u-1-10 key"><p>B</p></div>
  <div id="e" class="pure-u-1-10 key"><p>C</p></div>
  <div id="r" class="pure-u-1-10 key"><p>D</p></div>
  <div id="t" class="pure-u-1-10 key"><p>E</p></div>
  <div id="y" class="pure-u-1-10 key"><p>F</p></div>
  <div id="u" class="pure-u-1-10 key"><p>G</p></div>
  <div id="i" class="pure-u-1-10 key"><p>H</p></div>
  <div id="o" class="pure-u-1-10 key"><p>I</p></div>
  <div id="p" class="pure-u-1-10 key"><p>J</p></div>
</div>

如何居中（居中）纯 css 列的内容

How to center the content of (centered) pure css columns

html

css

yui-pure-css