Alinhamento de <Li> centralizados em <UL>

[Gustavo Matera 1]

Pessoal, estou com dificuldades para centralizar as <Li> que são geradas dinamicamente pelo shortcode display-posts...

 

Gostaria de centralizá-las horizontalmente na UL, sem ter que "marretar" larguras, margin ou padding...

 

A URL da página é essa: https://marketingobjetivo.com.br/

 

A questão está nos artigos listados no final da página.

 

Reparem que eles estão mais alinhados à esquerda e eu gostaria que o bloco de LIs ficassem centralizados na página.

 

Agradeço antecipadamente a todos que tentarem me ajudar ; )

[Maujor 144]

Faça as seguintes alterações na folha de estilos:

.display-posts-listing{
  list-style-type:none;
  overflow:auto;
  display: flex; /* <=== acrescente */
  flex-wrap:wrap; /* <=== acrescente */
  justify-content: space-around; /* <=== acrescente */
}

.display-posts-listing li{ /* substitua todas as declarações por estas */
  margin:0;
  margin:25px 0 15px 0;
  background-color:#fff;
  width:31%;
}

.display-posts-listing li img {width:100%;} /* <=== crie esta regra CSS */

 

[Gustavo Matera 1]

@Maujor O alinhamento das LI na UL ficou perfeito, exatamente como eu precisava.

 

Espero que este tópico possa ajudar outras pessoas.

Para isso, deixo as modificações realizadas documentadas abaixo e imagens para ilustrar a correção no site.

 

Muito obrigado!

 

Abs

 

.................................................

CSS ANTES, COM PROBLEMAS DE ALINHAMENTO:

.display-posts-listing{
  list-style-type: none;
  overflow: auto;
}
.display-posts-listing li {
    float: left;
    padding: 5px;
    margin: 0;
    text-align: center;
   margin: 25px 0 15px 0;
    background-color: #fff;
    display: block;
    width: 31%;
}
.display-posts-listing ul {   /* nada mudou aqui, deixei apenas para referência*/
    margin-top: 30px;
  width: 100%;
    margin: auto;
}

 

.................................................

CSS CORRIGDAI:

 

 

.display-posts-listing{
  list-style-type: none;
  overflow: auto;
  display: flex; 
  flex-wrap:wrap;
 justify-content: space-around;
}
.display-posts-listing li {
  margin:0;
  margin:25px 0 15px 0;
  background-color:#fff;
  width:31%;
}
.display-posts-listing ul { /* nada mudou aqui, deixei apenas para referência*/
    margin-top: 30px;
  width: 100%;
    margin: auto;
}