3
respostas

Cabeçalho e rodapé desalinhados

Não sei o que acontece, mas algumas funções como text-alin e aling-itens parecem não funcionar em algumas partes do código. Veja se consegue me ajudar: no cabeçalho não consigo alinhar no centro da pag os menus categoria, favoritos e minha estante Insira aqui a descrição dessa imagem para ajudar na acessibilidade

e no rodapé não consigo alinhar os icones ao texto link: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

esse é o link do drive com os arquivos https://drive.google.com/drive/folders/1KNYfHjkvq2yqLvk_qAAlKg4lanfJAuqM?usp=share_link

Obrigado.

3 respostas

Oi, Gabriel!

Para o seu header uma solução seria adicionar mais uma classe à div que contém o menu e colocar um width nela de 100%. Assim, a div vai ocupar toda a área não ocupada pelos ícones de sacola e perfil e você pode centralizar os elementos nessa área. Com isso, se você aplicar um justify-content: center agora vai dar certo. Caso queira colocar mais ao centro da página pode usar também um padding-left ou um margin-left.

Com relação ao seu footer, se você colocar um display: flex na classe rodape-item e colocar um align-items: center, resolve o teu problema.

Boa tarde, Moana. Eu testei e infelizmente suas sugestões não funcionaram em nenhum dos dois pontos :/ Já testei diversas trocas de valores mas nada foi efetivo ate agora.

Oi, Gabriel. Ó só, eu fiz alterações em pequenos trechos e em apenas três dos teus arquivos. Vou colocar aqui pra você dar uma olhada.

Primeiro, no index.html, só adicionei uma classe "nova-classe" na div da linha 18:

<body>
    <header class="cabecalho">
        <div class="container **nova-classe**">
            <input type="checkbox" id="Menu" class="container__botao">
            <label for="Menu">
                <span class="cabecalho__menu-hamburguer container__imagem"></span>
            </label>
        [...]

Depois, no header.css, só adicionei essas quatro linhas:

.nova-classe {
    width: 100%;
    justify-content: center;
}

Essas duas mudanças vão fazer com que seu menu fiquei centralizado.

Por fim, no footer.css, também só adicionei essas quatro linhas. Isso fez com que os itens ficassem alinhados com os ícones na vertical.

.rodape_item {
    display: flex;
    align-items: center;
}

Essas foram as únicas mudanças que fiz no código que você enviou e funcionou aqui. Dá uma revisada nele. Pode ser que tenha algum errinho de digitação ou alguma coisa do tipo. Espero que dê certo. :)