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

Mudanças no seletor 'aside a'

Quero alinhar no centro esse texto:

<aside>
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </aside>

Entretanto, o alinhamento só funciona no seletor aside { } e não funciona no aside a { }

Porque?

5 respostas
solução!

Oi Joao, tudo bem?

Faz um teste e tenta colocar uma largura nos elementos <a>. Não vai funcionar pois eles são elementos inline.

E além de não conseguirmos colocar width/height em elementos desse tipo, o text-align: center só funciona com elementos que ocupem mais que sua própria largura.

Uma forma de contornar:

a {
  text-align: center;
  display: block;
}

Fiz esse Jsbin aqui para que voce consigar ver a diferença. Teste mudando para inline-block, block, etc. Tente colocar largura nos <a> também e use a borda conseguir ver os limites do elemento.

Espero ter ajudado e bons estudos.

Abcs!

Entendi, valeu!

Mas agora surgiram algumas dúvidas, seguinte: Essa hashtag "bad" seria pra dizer que é uma má prática? border: 1px solid #bad;

Outra coisa, consegui resolver isso na tag aside usando o !Important, pode-se usar esse atributo normalmente?

E agora, pra fechar, A definição do display = inline; Implica que a customização de largura, altura e posição do texto fica bloqueada?

Obg novamente!

Oi Joao,

Vamos la:

1 - o #bad eh uma abreviacao de #BBAADD, apenas uma cor

2 - !important funciona, mas isso sim eh considerado ma pratica pois normalmente é usado quando fazemos "caca" nos seletores CSS. Depois de terminar os cursos de HTML e CSS aqui da Alura procura um post sobre Arquitetura BEM no Blog da Alura.

3 - Basicamente, sim. Sao caracteristicas visuais de elementos inline.

Nao esquece de fazer os cursos iniciais de HTML e CSS para entender e praticar tudo isso, ok?

Abcs e bons estudos!

Desculpa, uma útlima coisa:

2.1 - O post é esse: http://blog.alura.com.br/a-arquitetura-do-novo-site-do-alura/ ?

2.2 - Como assim fazer 'caca'? Especificamente, o que pode ocasionar? É uma má prática apenas pra organização do código? O site perde em termos de performance?

Oi Joao,

Esse aqui: http://blog.alura.com.br/criando-componentes-css-com-padrao-bem/

Basicamente voce acaba com a ideia de cascata que o CSS tem, da uma lida nessa thread sobre o assunto.

Abcs e bons estudos!