Codelab: Centralização no CSS
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Este codelab ajuda você a compartilhar e mostrar sua maneira favorita de centralizar
o CSS.
Confira minha postagem do blog Centralizar no CSS para saber mais sobre as cinco formas favoritas de centralizar o CSS. Ou assista a este vídeo!
Instalação
- Clique em Remixar para editar para tornar o projeto editável.
- Abrir
app/index.html
- Em
line 23
, substitua /* your centering CSS here /*
pelo seu CSS
- (Opcional) Dê um nome à técnica de centralização e substitua o texto no
<h1>
Estilos
- Crie um novo arquivo na pasta
app/css/
- Crie um seletor para manter sua solução de centralização, como
.turbo-center
ou
[floaty-mcfloat]
.
- Com esse novo seletor, escreva sua técnica de centralização. Se quiser, consulte
o outro em
app/css/
, como exemplos.
- (opcional) escreva alguns "estilos de suporte" para que possamos ver quais filhos precisam
de estilos para oferecer suporte à centralização
- Abra
app/css/index.css
e importe o novo arquivo na parte inferior da tela.
Juntar tudo
- Abra
app/index.html
novamente
- Encontre o
<article>
e atribua a ele o seletor personalizado que você fez na etapa 2 da
seção anterior.
- Envie um tweet para mim sobre o Glitch e eu vou incluí-lo na
postagem do blog.
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2020-12-16 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Não contém as informações de que eu preciso"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Muito complicado / etapas demais"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Desatualizado"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema na tradução"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema com as amostras / o código"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Outro"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Fácil de entender"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Meu problema foi resolvido"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Outro"
}]