尝试对齐列表容器内的文本的问题答案

【问题标题】：Issues attempting to align text inside of list containers尝试对齐列表容器内的文本的问题
【发布时间】：2019-05-16 05:50:34
【问题描述】：

我有一排四个 li 容器，每个容器里面都有 H3 文本。我希望文本垂直和水平居中，但只能垂直居中。多次尝试使用垂直对齐：中间；但没有运气。这是我正在使用的。

HTML：

<ul class="products oceanwp-row clr grid shop-variety">
    <li style="background-image: url( http://flowerlinkla.com/staging/wp-content/uploads/2018/12/bkg-garden-rose.jpg ) !important;" class="shop-variety product col span_1_of_4"><div class="shop-content"><h3>Garden Rose</h3></div></li>
</ul>

CSS：

.shop-variety.product.col.span_1_of_4 {
    height: 285px;
    width: 24%;
    margin: 24px .5%;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

应该提到我也尝试过 display: flex。没有运气。

http://flowerlinkla.com/staging/shop/

【问题讨论】：

你把它水平居中了。

标签： html css flexbox vertical-alignment

【解决方案1】：

@manoj-kumar 的答案是完美的。澄清一下，justify-content 在主轴上对齐子元素。例如，如果您将 flex 水平定向（flex-direction: row - 这是默认值），justify-content: center 将水平居中子元素。

另一方面，align-items 会在辅助轴上对齐它。如果您要垂直定向您的 flex (flex-direction: column)，align-items: center 将水平居中子元素，justify-content: center 将垂直居中子元素。

这是一个CodePen，以使其在视觉上更清晰。 ;)

在这里您可以阅读有关 Flexbox 属性的所有信息。 [https://css-tricks.com/snippets/css/a-guide-to-flexbox/]

希望对你有帮助。

【讨论】：

【解决方案2】：

既然你说你尝试display: flex，它需要一些其他属性，比如justify-content和align-items

.shop-variety.product.col.span_1_of_4 {
  /* Remove */
  display: table-cell;
  vertical-align: middle;

  /* Add */
  display: flex;
  justify-content: center;
  align-items: center;
}

输出：

【讨论】：

谢谢。这就解释了为什么它不起作用。感谢您的帮助。