Gorizontal tekislash

Gorizontal markazlash

CSS’da elementlarni gorizontal markazlashning bir necha usuli bor — element turiga qarab.

Blok darajasidagi elementni (masalan, <div>) gorizontal markazlash uchun margin: auto;’dan foydalaning.

Element o‘z konteyneri chetlarigacha cho‘zilib ketmasligi uchun uning width xossasini ham belgilang.

Eslatma: width xossasi belgilanmasa (yoki 100% qilsa), markazga tekislash blok darajasidagi elementlarga ta’sir qilmaydi.

Quyida <div> elementi markazlashtirilgan va kengligi 50% (qolgan bo‘shliq chap va o‘ng tashqi bo‘shliqlar o‘rtasida teng bo‘linadi):

Bu div elementi markazlashtirilgan.

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

Blok darajasidagi element ichidagi matnni markazlash uchun text-align: center; ishlatting.

Bu matn markazlashtirilgan.

p {
text-align: center;
}

Maslahat: Matnni tekislash bo‘yicha ko‘proq misollar uchun CSS Text bobiga qarang.

Rasmni markazlashtirish uchun margin-left va margin-right qiymatlarini auto ga o‘rnating hamda rasmni block elementiga aylantiring:

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

Elementlarni tekislashning yana bir usuli — position: absolute; dan foydalanish:

Eslatma: Absolyut joylashtirilgan elementlar normal oqimdan chiqariladi va boshqa elementlar ustiga chiqishi mumkin.

Bu <div> elementi position: absolute xossasi bilan o‘ngga joylashtirilgan.

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

Elementni chapga yoki o‘ngga tekislashning yana bir usuli — float xossasidan foydalanish:

.right {
  float: right;
width: 300px;
  border: 3px solid green;
  padding: 10px;
}

Yutuqlaringizni kuzating – bu bepul!