Проблемы при попытке выровнять текст внутри контейнеров списка

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;
}

Следует упомянуть, что я пробовал display: flex также.Не повезло.

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

Answer 1

Ответ @ manoj-kumar идеален.Просто чтобы уточнить, justify-content выравнивает дочерние элементы по главной оси.Например, если вы ориентируете свой флекс по горизонтали (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 /]

Надеюсь, это поможет.

Answer 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;
}

Выход: