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-wrap: nowrap - 项目无法换行

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

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即可。以下是解释： Why is there a vertical scroll bar if parent and child have the same height?

浏览器支持：

所有主流浏览器except IE < 10都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前缀，请使用Autoprefixer。 this answer中的更多详细信息。

Answer 2

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

中应用vertical-align: top;即可

Answer 3

我在你的CSS中做了一些改动。在容器中添加了display：table并显示：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>

我希望我有所帮助

垂直对中元件和水平对齐文本时水平放置

3 个答案: