Тёмный

Como centralizar elementos com CSS (margin, flexbox, grid layout) - Dica rápida #1  

Academia dos Devs
Подписаться 10 тыс.
Просмотров 29 тыс.
50% 1

E aí Dev, você também já sofreu pra centralizar elementos HTML com CSS? Nesse vídeo eu te mostro 3 opções (as melhores na minha opinião) de como fazer isso.
#Shorts
💬 Redes sociais
Instagram: / academiadosdevs
Tiktok: / academiadosdevs
Outras redes: beacons.ai/academiadosdevs

Опубликовано:

 

27 апр 2021

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 42   
@Bruno-yt9jk
@Bruno-yt9jk 2 года назад
Desde que o width e height estejam definidos.
@welderressutti5364
@welderressutti5364 Год назад
detalhe que muda tudo, obrigado!
@gabrielblackout2305
@gabrielblackout2305 7 месяцев назад
Como assim?
@frank511
@frank511 3 года назад
O começo do vídeo é literalmente eu aprendendo css
@anakarine7979
@anakarine7979 2 года назад
Eu aprendendo java
@maeltralha2062
@maeltralha2062 Год назад
Grid como sempre mais rapido kskskss
@franguimaraes
@franguimaraes Год назад
Era exatamente o que eu estava procurando, deu até um alivio em ver as imagens alinhadas e centralizadas no site
@MatheusLima-kt7pd
@MatheusLima-kt7pd 11 месяцев назад
Não sabia dessa do place-items. Valeu amigo 👍
@eullerl4768
@eullerl4768 Год назад
agora aprendi centralizar uma div 😭😭😭
@kauankingeski834
@kauankingeski834 Год назад
Rápido e pratico, obg pelo vídeo.
@werissonferreira9321
@werissonferreira9321 2 года назад
Caraca que dica foda e direta!
@gabrielmatias9366
@gabrielmatias9366 2 года назад
Me ajudou quando tava precisando , obrigado !
@felipemoura6878
@felipemoura6878 2 года назад
veio literalmente no momento que eu to sofrendo com isso, valeuu
@igorperrot6346
@igorperrot6346 9 месяцев назад
valeu mano, salvou :)
@AcademiadosDevs
@AcademiadosDevs 8 месяцев назад
Que bom que ajudou :D
@email4730
@email4730 Год назад
Meu herói
@alexandrebanzato3973
@alexandrebanzato3973 Год назад
Obg manooo me ajudou muito
@keitiwislli161
@keitiwislli161 Год назад
nossa muito obgd, um professor meu aqui do youtube ia me ensinar a centralizar uma tabela solta no body só mais p frente, mas eu tava agoniada com ela no canto e tudo no meio certinho kkkkkkkkk
@sprayn2027
@sprayn2027 3 года назад
Vídeo top slc
@andersonalves3466
@andersonalves3466 4 месяца назад
" Não vai velho, não vai"kkkkkkk
@user-fk6vy2xt8h
@user-fk6vy2xt8h 11 месяцев назад
Já falaram, mas... O align items e o justify content só alinham o filho no elemento pai, não na tela inteira. A altura e a largura do pai deve ser definida. Caso queiram alinhar no centro usem height de 100dvh E width de 100dvw no pai. Recomendo nao usar vh ou vw por ela não funcionar em todos os tamanhos de tela. Ao invés disso recomendo fazer como dito acima: dvh e dvw. Importante também fazer um reset css, para fazer o reset basta digitar no início de teu css: *{ margin: 0; padding: 0; border: none; box-sizing: border-box; }
@AcademiadosDevs
@AcademiadosDevs 10 месяцев назад
Boaaa
@DevSamir-je7md
@DevSamir-je7md 10 месяцев назад
Muitíssimo obrigado!
@Reis.507
@Reis.507 8 месяцев назад
o meu funcionou deixa quietodo jeito que ele fala ms ent kkk
@reidaslegendas2396
@reidaslegendas2396 4 месяца назад
Para que serve o reset css?
@user-fk6vy2xt8h
@user-fk6vy2xt8h 4 месяца назад
@@reidaslegendas2396As páginas tem css padrão, é tipo um css que vc não escreveu. O reset css serve para tirar esse css padrão porque ele atrapalha o design do site. Por exemplo, o navegador coloca margin e padding, além de colocar por padrão todas as bordas como externa sem você pedir nos elementos da páginas: Margin: 0; tira a margin. Padding: 0; tira o padding Box-sizing: border-box; transforma borda externa em borda interna (importante para grid principalmente) O reset css é importante porque as vezes você fica procurando um erro no seu css para justificar um design quebrado por exemplo quando na verdade esse design quebrado foi causado pelo css padrão do navegador. (Se eu tiver falado alguma coisa errada, qualquer um pode me corrigir)
@chapulinazulado7717
@chapulinazulado7717 Год назад
Antigamente a referência era a ponta superior esquerda da div .. Precisava da ré na div pra centralizar .. O flex box usa o eixo central da div .
@AcademiadosDevs
@AcademiadosDevs Год назад
Sim, tinha todo tipo de gambiarra
@stomperhk9107
@stomperhk9107 3 года назад
KK, vídeo legalzinho.
@dagobertocarvalho4314
@dagobertocarvalho4314 Год назад
valeu. eu uso o primeiro ksksks
@caioitalo3618
@caioitalo3618 Год назад
mto obrigado man, agora foi kkkkkkkkkkkkk
@AcademiadosDevs
@AcademiadosDevs Год назад
Aewwww
@carlosbrhenrique1963
@carlosbrhenrique1963 2 года назад
Não curto o place-items, mas é uma boa
@002y
@002y 11 месяцев назад
"ok google... como centralizar uma div"
@mutv70
@mutv70 7 месяцев назад
Display flex margin auto.
@endergames3.031
@endergames3.031 6 месяцев назад
por que essa parte de centralizar e tao dificil mds
@AcademiadosDevs
@AcademiadosDevs 6 месяцев назад
Hoje em dia está bem mais fácil, flexbox ajuda muitoo
@rangelamaro
@rangelamaro Год назад
heroi kkkkk, nem no site da w3 eles falam
@bestsport6715
@bestsport6715 Год назад
Sabe como eu faço para mudar a cor do body usando hover? Mas o mouse n vai estar em cima do body para a mudança de cor ,mas em outro elemento,tipo, um quadrado no meio
@AcademiadosDevs
@AcademiadosDevs Год назад
Por CSS você conseguirá apenas mudar o estilo de elementos filhos desse QUADRADO ou elementos que são "irmãos" desse QUADRADO. Você pode usar JavaScript para fazer isso sem problemas.
@user-fk6vy2xt8h
@user-fk6vy2xt8h 11 месяцев назад
Sim, vc precisa usar javascript. Bote isso no teu html: var body = document.querySelector("body") var quadrado = document.querySelector("Aqui você bota o id ou a classe do quadrado. Lembrando que se for id bota um # antes e se for classe bota um . antes") quadrado.addEventListener("click", ()=>{ body.style.background = "aqui tu bota a cor"; })
Далее
Como aprender CSS GRID de uma vez por todas! 🤯
21:19
OS TIPOS DE DISPLAY DOS ELEMENTOS - HTML E CSS
12:13
Просмотров 17 тыс.
1❤️
00:17
Просмотров 8 млн
Penalty: Portugal - Slovenia
02:03
Просмотров 1,3 млн
Como Centralizar uma DIV ou Qualquer coisa no CSS
15:41
Aprenda Flexbox de uma vez por todas! 😍
21:38
Просмотров 11 тыс.
Card para web com HTML e CSS Puro
8:14
Просмотров 27 тыс.
Flexbox or grid - How to decide?
18:51
Просмотров 705 тыс.
Learn CSS Grid - A 13 Minute Deep Dive
13:35
Просмотров 484 тыс.
CSS GRID na PRÁTICA - Tutorial Completo
25:21
Просмотров 33 тыс.
Learn CSS Grid in 20 Minutes
18:35
Просмотров 771 тыс.
Aprenda CSS Grid em 30 minutos - Tutorial Grid
30:11
Просмотров 54 тыс.
Aprenda Flexbox em 10 Minutos | Tutorial de HTML & CSS
12:02
1❤️
00:17
Просмотров 8 млн