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

Question

我有一排四个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;
}

应该提一下我尝试显示的方法：flex。没有运气。

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

Answer 1

自从您说过尝试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;
}

输出：

Answer 2

@ manoj-kumar的答案是完美的。 为了明确起见，调整内容在主轴上对齐子元素。 例如，如果要水平调整柔韧性（flex-direction: row-这是默认值），则justify-content: center将使子元素水平居中。

另一方面， align-items 会将其在辅助轴上对齐。如果您要垂直调整柔韧性（flex-direction: column），则align-items: center将使子元素水平居中，而justify-content: center将使子元素垂直居中。

这里是CodePen，以使其在视觉上更加清晰。 ;）

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

希望对您有帮助。