垂直和水平居中元素，同时水平对齐文本

Question

我们的网站需要一些产品色样，老板希望它们看起来与印刷目录中的完全一样。这意味着水平排成一排方块，每个方块都有不同的颜色，并且该颜色的名称覆盖在其绝对中心。像这样：

我尝试了两种不同的方法来使我们网站上的样本遵循这一既定惯例，但由于某种原因它没有发生。而且，是的，我看起来还是有点新手。

这是我的第一次尝试，使用 display:table/display:table-cell 方法：

<p>Standard Ink Colors</p>
<ul class="color-list">
  <li id="thumb-red">
    <p>Red</p>
  </li>
  <li id="thumb-orange">
    <p>Orange</p>
  </li>
  <li id="thumb-athleticgold">
    <p>Athletic Gold</p>
  </li>
</ul>
<p>Be sure to specify Standard ink color above or provide us with your PMS ink number. </p>

一切都沿着文本的最后一条基线排列。

所以我尝试使用 Flexbox:

JSFiddle

<p>Standard Ink Colors</p>
<ul class="color-list">
  <li id="thumb-red">Red</li>
  <li id="thumb-orange">Orange</li>
  <li id="thumb-athleticgold">Athletic Gold</li>
</ul>
<p>Be sure to specify Standard ink color above or provide us with your PMS ink number. </p>

类似的问题，只是现在事情符合第一个基线。

有什么解决办法吗？

Answer 1

将单个项目的父项设为弹性容器。这将激活几个默认设置：

flex-direction: row - 每个子元素 ("flex item") 被强制排成一行
flex-wrap: nowrap - 物品将无法包装

然后使主容器的每个弹性项目兼作（嵌套）弹性容器。这将允许您控制子元素（在本例中为文本）的对齐方式。

如果 justify-content、align-items 和 text-align 都设置为 center，文本将始终在垂直和水平方向上居中。

.color-list {
   display: flex;
   justify-content: center;
   padding: 0;
}
.color-list li {
   display: flex;
   justify-content: center;
   align-items: center;     
   text-align: center;
   width: 4em;
   height: 4em;
}
#thumb-red          { background-color: #CE1126; }
#thumb-orange       { background-color: #FE5000; }
#thumb-athleticgold { background-color: #FFB81C; }

<ul class="color-list">
  <li id="thumb-red">Red</li>
  <li id="thumb-orange">Orange</li>
  <li id="thumb-athleticgold">Athletic Gold</li>
</ul>

关于您原始代码中的错位...

一般而言，没有理由对每个项目都使用 display: inline-flex。但是，如果这是您的要求，则只需将 vertical-align: middle 或 top 添加到每个 li。解释如下：

浏览器支持：

所有主流浏览器都支持 Flexbox，except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in 。

Answer 2

您可以使用任何方法。只需在 .color-list li

中应用 vertical-align: top;

Answer 3

我对您的 css 进行了一些更改。添加了 display: table 在你的容器和 display: talbe-cell.

.color-list {
  display: table;
}
.color-list li {
  width: 4em;
  height: 4em;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.color-list li > p {
  text-align: center;
}

#thumb-red {
  background-color: #CE1126;
}

#thumb-orange {
  background-color: #FE5000;
}

#thumb-athleticgold {
  background-color: #FFB81C;
}

<p>Standard Ink Colors</p>
<ul class="color-list">
  <li id="thumb-red">
    <p>Red</p>
  </li>
  <li id="thumb-orange">
    <p>Orange</p>
  </li>
  <li id="thumb-athleticgold">
    <p>Athletic Gold</p>
  </li>
</ul>
<p>Be sure to specify Standard ink color above or provide us with your PMS ink number. </p>

希望对您有所帮助

垂直和水平居中元素，同时水平对齐文本

Centering elements vertically & horizontally while aligning text horizontally

html

css

centering

flexbox