Top 3 Ways to Center a DIV with CSS
Fireship · English · C2 (Proficient) · 37 seconds
Learn English with “Top 3 Ways to Center a DIV with CSS” by Fireship: tap any word in the subtitles for its meaning in your own language (Azerbaijani, Slovak or simple English). Level C2 (Proficient). “The most difficult thing a web developer ever has to do is center”
Transcript with translation
The most difficult thing
Veb proqramçının heç vaxt etməli olduğu ən çətin şey div elementini həm üfüqi,
a web developer ever has to do is center
Veb proqramçının heç vaxt etməli olduğu ən çətin şey div elementini həm üfüqi,
a div both horizontally
Veb proqramçının heç vaxt etməli olduğu ən çətin şey div elementini həm üfüqi,
and vertically with CSS.
həm də şaquli olaraq CSS ilə mərkəzə yerləşdirməkdir.
There are hundreds of ways to get the job done,
İşi yerinə yetirmək üçün yüzlərlə üsul var,
but the classic approach is to use absolute positioning,
lakin klassik yanaşma mütləq mövqeləndirmədən istifadə etməkdir,
then move it down
sonra top və left xassələrindən istifadə edərək onu 50% aşağı və sağa hərəkət etdirmək,
and to the right by 50% by using the top
sonra top və left xassələrindən istifadə edərək onu 50% aşağı və sağa hərəkət etdirmək,
and left properties,
daha sonra isə onu 50% translating edərək əks istiqamətə geri qaytarmaqdır.
then move it back the other
daha sonra isə onu 50% translating edərək əks istiqamətə geri qaytarmaqdır.
direction by translating it 50%.
daha sonra isə onu 50% translating edərək əks istiqamətə geri qaytarmaqdır.
This confusing hack was the gold standard
Bu çaşdırıcı həll üsulu Flexbox gəlib çıxana qədər qızıl standart idi,
until Flexbox came around,
Bu çaşdırıcı həll üsulu Flexbox gəlib çıxana qədər qızıl standart idi,
where we can make the parent div
harada ki valideyn div elementini elastik sütun və ya sətr edə bilirik,
a flexible column or row,
harada ki valideyn div elementini elastik sütun və ya sətr edə bilirik,
then align and justify the children in the center.
və uşaq elementləri mərkəzdə align və justify edirik.
That's a great option,
Bu əla seçimdir,
but today we can do it with even fewer
lakin bu gün grid layout istifadə edərək bunu daha az kod sətri ilə edə bilərik.
lines of code using grid layout.
lakin bu gün grid layout istifadə edərək bunu daha az kod sətri ilə edə bilərik.
Just define the parent div as a grid,
Sadəcə valideyn div elementini grid kimi təyin edin və sonra ona elementləri mərkəzə yerləşdirməyi deyin.
and then tell it to place the items in the center.
Sadəcə valideyn div elementini grid kimi təyin edin və sonra ona elementləri mərkəzə yerləşdirməyi deyin.
Yes, it's just that simple.
Bəli, bu qədər sadədir.
Words and phrases in this video
- align (C1)
- , düzləndirmək
- div (B2)
- div elementi
- horizontally (B2)
- üfüqi olaraq
- vertically (B2)
- şaquli olaraq
- positioning (B2)
- mövqeləndirmə
- translate (B2)
- köçürmək
- hack (B2)
- həll üsulu
- flexible (B2)
- elastik
- justify (B2)
- aralarındakı məsafəni tənzimləmək
- grid (B2)
- tor
- layout (B2)
- yerləşdirmə
- define (B2)
- müəyyən etmək
- web (B1)
- veb
- developer (B1)
- proqramçı
- get done (B1)
- yerinə yetirmək
- classic (B1)
- klassik
- approach (B1)
- yanaşma
- absolute (B1)
- mütləq
- property (B1)
- xassə
- confusing (B1)
- çaşdırıcı
- standard (B1)
- standart
- column (B1)
- sütun
- option (B1)
- seçim
- code (B1)
- kod
- most (A2)
- ən
- ever (A2)
More videos to learn English with
- Awesome User Avatars Made Easy · Fireship · B2
- Uh oh… AI-search engine for developers has emerged · Fireship · C2
- Meet SAM… Meta’s latest AI model · Fireship · C2
- Creators Share Embarrassing Stories of Linus · Linus Tech Tips · B1
- Who pays the price for the AI boom? · Vox · C1
- 60 Day Body Transformation · Mrwhosetheboss · A2
- The HOTTEST Phone · Marques Brownlee · A2
- Lewis Hamilton Explains F1 Tire Strategy · Marques Brownlee · B2
- I Discovered a Lost Plane · Mark Rober · C2
- Yo mama so FAT32... · Fireship · B2
- This iPhone Duo Animation 👀 · Marques Brownlee · A2
- My $60,000,000 Experiment · Mark Rober · B2