Solucionado
Bom dia, gostaria de saber como faço para alinhar as li no centro horizontal e vertical da ul e também, como faço para alinhar o texto com o icone na vertical. Quero que o texto mantenha essa distancia próxima do icone.
Para ficar mais fácil, fiz um exemplo no codepen:
Cleiton, primeiro, pra alinhar os itens dentro da sua li, use vertical-align:middle. Isso você vai precisar em qualquer caso.
img, p {
display: inline;
vertical-align: middle;
}Agora, para alinhar na ul existem uma ou duas soluções, mas nenhuma é 100% ideal.
A primeira é limitar o tamanho do conteúdo da sua li utilizando padding-top ou margin-top:
li {
padding-top:calc((58px - 35px) / 2);
}Repare que 58px é o tamanho da sua ul e 35px o tamanho da sua img.
A outra opção é utilizar display:flex mas ele ainda não é compatível com todos os navegadores.
ul {
display: flex;
align-items: center;
}Entendi o inline eu defino para os dois elementos.
Segue alterações, e posicionamento correto. Muito obrigado mesmo.