Тёмный

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

Academia dos Devs
Подписаться 11 тыс.
Просмотров 30 тыс.
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/aca...

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

 

2 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 43   
@Bruno-yt9jk
@Bruno-yt9jk 3 года назад
Desde que o width e height estejam definidos.
@welderressutti5364
@welderressutti5364 Год назад
detalhe que muda tudo, obrigado!
@gabrielblackout2305
@gabrielblackout2305 10 месяцев назад
Como assim?
@frank511
@frank511 3 года назад
O começo do vídeo é literalmente eu aprendendo css
@anakarine7979
@anakarine7979 3 года назад
Eu aprendendo java
@Bolivarpr
@Bolivarpr Месяц назад
salvou muito obrigado parabéns pelo conteúdo!
@mutv70
@mutv70 10 месяцев назад
Display flex margin auto.
@maeltralha2062
@maeltralha2062 Год назад
Grid como sempre mais rapido kskskss
@eullerl4768
@eullerl4768 Год назад
agora aprendi centralizar uma div 😭😭😭
@Programador-f8u
@Programador-f8u Год назад
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 Год назад
Boaaa
@DevSamir-je7md
@DevSamir-je7md Год назад
Muitíssimo obrigado!
@Reis.507
@Reis.507 11 месяцев назад
o meu funcionou deixa quietodo jeito que ele fala ms ent kkk
@reidaslegendas2396
@reidaslegendas2396 7 месяцев назад
Para que serve o reset css?
@Programador-f8u
@Programador-f8u 7 месяцев назад
@@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)
@endergames3.031
@endergames3.031 9 месяцев назад
por que essa parte de centralizar e tao dificil mds
@AcademiadosDevs
@AcademiadosDevs 9 месяцев назад
Hoje em dia está bem mais fácil, flexbox ajuda muitoo
@MatheusLima-kt7pd
@MatheusLima-kt7pd Год назад
Não sabia dessa do place-items. Valeu amigo 👍
@franguimaraes
@franguimaraes Год назад
Era exatamente o que eu estava procurando, deu até um alivio em ver as imagens alinhadas e centralizadas no site
@stomperhk9107
@stomperhk9107 3 года назад
KK, vídeo legalzinho.
@002y
@002y Год назад
"ok google... como centralizar uma div"
@dagobertocarvalho4314
@dagobertocarvalho4314 Год назад
valeu. eu uso o primeiro ksksks
@rangelamaro
@rangelamaro Год назад
heroi kkkkk, nem no site da w3 eles falam
@werissonferreira9321
@werissonferreira9321 2 года назад
Caraca que dica foda e direta!
@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
@gabrielmatias9366
@gabrielmatias9366 3 года назад
Me ajudou quando tava precisando , obrigado !
@kauankingeski834
@kauankingeski834 Год назад
Rápido e pratico, obg pelo vídeo.
@felipemoura6878
@felipemoura6878 3 года назад
veio literalmente no momento que eu to sofrendo com isso, valeuu
@sprayn2027
@sprayn2027 3 года назад
Vídeo top slc
@alexandrebanzato3973
@alexandrebanzato3973 Год назад
Obg manooo me ajudou muito
@email4730
@email4730 Год назад
Meu herói
@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
@andersonalves3466
@andersonalves3466 7 месяцев назад
" Não vai velho, não vai"kkkkkkk
@carlosbrhenrique1963
@carlosbrhenrique1963 2 года назад
Não curto o place-items, mas é uma boa
@caioitalo3618
@caioitalo3618 Год назад
mto obrigado man, agora foi kkkkkkkkkkkkk
@AcademiadosDevs
@AcademiadosDevs Год назад
Aewwww
@igorperrot6346
@igorperrot6346 Год назад
valeu mano, salvou :)
@AcademiadosDevs
@AcademiadosDevs 11 месяцев назад
Que bom que ajudou :D
@bestsport6715
@bestsport6715 2 года назад
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.
@Programador-f8u
@Programador-f8u Год назад
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"; })
Далее
Learn CSS Grid in 20 Minutes
18:35
Просмотров 791 тыс.
OS TIPOS DE DISPLAY DOS ELEMENTOS - HTML E CSS
12:13
Просмотров 19 тыс.
Как открыть багажник?
00:36
Просмотров 16 тыс.
7 ways to deal with CSS
6:23
Просмотров 1,1 млн
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 358 тыс.
Como aprender CSS GRID de uma vez por todas! 🤯
21:19
Learn CSS flexbox in 10 minutes! 💪
10:01
Просмотров 163 тыс.
Aprenda CSS Grid em 30 minutos - Tutorial Grid
30:11
Просмотров 57 тыс.
10 CSS Pro Tips - Code this, NOT that!
9:39
Просмотров 2,2 млн