Align

CSS Joylashuvi - Gorizontal va Vertikal Qatorlash

Blok elementni (masalan, <div>) gorizontal markazda joylashtirish uchun margin: auto; ni ishlating.

Elementning kengligini belgilash uni konteynerning chetlariga cho'zilishdan himoya qiladi.

Element belgilangan kenglikni oladi va qolgan joy ikkita chetga teng taqsimlanadi:

Bu <div> elementi markazda joylashgan.

Misol

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Eslatma: Markazda joylashish kenglik xususiyati belgilanmagan (yoki 100% qilib belgilangan) bo'lsa, ta'sir qilmaydi.

Matnni Markazda Joylashtirish

Element ichidagi matnni markazda joylashtirish uchun text-align: center; ni ishlating:

Bu matn markazda joylashgan.

Misol

.center {
  text-align: center;
  border: 3px solid green;
}

Maslahat: Matnni qanday qatorlash haqida ko'proq misollar uchun CSS Matn bo'limiga qarang.

Rasmni Markazda Joylashtirish

Rasmni markazda joylashtirish uchun chap va o'ng chetlarni auto qilib belgilash va uni blok elementiga aylantirish kerak:

Parij

Misol

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Chap va O'ng Qatorlash - Pozitsiya yordamida

Elementlarni qatorlashning bir usuli position: absolute; ni ishlatishdir:

Yoshligimda otam menga bergan maslahatlar bor, ular haqida men hozirgacha o'ylayapman.

Misol

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73ad21;
  padding: 10px;
}

Eslatma: Mutlaq joylashgan elementlar odatdagi oqimdan olib tashlanadi va boshqa elementlarni ustma-ust joylashishi mumkin.

Chap va O'ng Qatorlash - Float yordamida

Elementlarni qatorlashning boshqa bir usuli float xususiyatidan foydalanishdir:

Misol

.right {
  float: right;
  width: 300px;
  border: 3px solid #73ad21;
  padding: 10px;
}

Clearfix Hack

Eslatma: Agar bir element uning ichki elementidan balandroq bo'lsa va u suzsa, u o'z konteyneridan "oshadi". Buni tuzatish uchun "clearfix hack" ni ishlatishingiz mumkin (quyidagi misolga qarang).

Hech qanday Clearfix

Clearfix bilan

Keyin, bu muammoni hal qilish uchun konteyner elementiga clearfix hackni qo'shishimiz mumkin:

Misol

.clearfix::after {
  content: '';
  clear: both;
  display: table;
}

Vertikal Markazda Joylash - Padding yordamida

CSSda elementni vertikal markazda joylashtirishning ko'plab usullari mavjud. Oddiy yechim - yuqori va pastki to'ldirishni ishlatish:

Men vertikal markazda joylashganman.

Misol

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Vertikal va gorizontal markazda joylashish uchun to'ldirish va text-align: center; dan foydalaning:

Men vertikal va gorizontal markazda joylashganman.

Misol

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Vertikal Markazda Joylash - Line-height yordamida

Boshqa bir usul - line-height xususiyatidan foydalanish, uning qiymati height xususiyatiga teng bo'lishi kerak:

Men vertikal va gorizontal markazda joylashganman.

Misol

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
 
/* Agar matn bir nechta qator bo'lsa, quyidagilarni qo'shing: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Vertikal Markazda Joylash - Pozitsiya va Transform yordamida

Agar to'ldirish va line-height variantlari bo'lmasa, boshqa bir yechim pozitsiyalash va transform xususiyatidan foydalanishdir:

Men vertikal va gorizontal markazda joylashganman.

Misol

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}
 
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Maslahat: Siz transform xususiyati haqida 2D Transformatsiyalar bobida ko'proq ma'lumot olasiz.

Vertikal Markazda Joylash - Flexbox yordamida

Siz ham flexbox yordamida narsalarni markazda joylashtirishingiz mumkin. Faqat shuni unutmangki, flexbox IE10 va undan oldingi versiyalar tomonidan qo'llab-quvvatlanmaydi:

Men vertikal va gorizontal markazda joylashganman.

Misol

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

Maslahat: Siz Flexbox haqida CSS Flexbox bobida ko'proq ma'lumot olasiz.

Ushbu sahifada