Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Centralizar UL

Tentei centralizar a UL do link Sobre mim do meu site www.sitesbyirala.hol.es e não consegui já procurei em diversos lugares e nada deu certo, alguém tem alguma ideia de como fazer por favor?

8 respostas

Oi Régis, tudo bem? Até onde vi, está centralizado, o problema são as proporções de texto e imagens que passam a impressão de não estar centralizado. Percebi também que você está forçando o tamanho da imagem a ser maior do que o espaço da LI em si fazendo um min-width de 150%.

Oi bom dia! você poderia colocar uma classe container dentro do nav para forçar a centralização.

Wanderson Macêdo, a imagem está com 150% porque eu vou trocar ela por uma que seja daquele tamanho é só pra visualizar mesmo. Eu coloquei 50% de width pra cada LI mas a imagem cai para baixo do texto e eu quero que fique do lado. A centralização correta ao meu ver seria com o traço que divide as LI's bem no meio do titulo. Entendi a respeito da proporção mas como falei se coloco 50% pra cada LI a imagem não fica do lado. Obrigado por acompanhar o post.

Talita Azevedo, se não me engano o nav está dentro do aside, vou tentar centralizar por ele. Obrigado por acompanhar o post.

Por nada, o importante é resolver o problema o que eu puder ajudar conte comigo.

solução!

Oi Régis, para a linha ficar ao centro você precisa fazer outras alterações. Faz assim, coloca as lis com 50% de largura. Depois, remove o padding-right da UL que você colocou. Ajusta o tamanho da imagem por que ela vai ficar enorme, por último, o diplay inline-block tem alguns problemas com espaços em branco no HTML, isso pode fazer com que os elementos da lista fiquem um abaixo do outro. Soluções para isso:

1 - Escrever as lis no código em uma única linha, sem nenhum espaço entre elas.

2 - Usar um comentário HTML entre as lis, ex:

<li> conteudo da li tranquilo </li><!-- comentario
--><li>Conteúdo da segunda li</li>

3 - trocar do inline block do display, para um float left (vai gerar outros problemas).

4 - Não usar nenhuma das abordagens acima e fazer o curso de Flexbox aqui da Alura (A MELHOR COISA QUE VOCÊ PODE FAZER ENTRE AS ALTERNATIVAS - Link aqui: https://cursos.alura.com.br/course/posicione-elementos-com-flexbox)!

Wanderson Macedo usei o flexbox e float, mudei algumas coisas mas está bem melhor. Obrigado !

Obrigado Talita Azevedo pela disponibilidade.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software