CSS Зэрэгцүүлэлт /Align/

Элементийг голлуулах

Хэвтээ тэнхлэгт блок элементийн голлуулахын тулд өргөнийг зааж өгч margin: auto;-г ашиглана.
Ингэснээр блок элемент голлож баруун болон зүүн талаас тэнцүү хэмжээний зайг авах болно.

<style>
.center {
margin: auto; 
width: 55%; 
border: 2px solid #3f9ce8; 
padding: 15px;
}
</style>

Текстийг голлуулах

Элементийн текстийг голлуулахын тулд text-align: center; шинж чанарыг ашиглана.

<style>
.center {
  text-align: center;
  border: 2px solid #3f9ce8;
}
</style>

Зураг голлуулах

Зургийг голлуулахын тулд block элемент болгож, зүүн болон баруун margin-д auto шинж чанарыг ашиглана.

<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>

Босоо тэнхлэгт голлуулах Padding-г ашиглах

Босоо тэнхлэгт контентийг голлуулах хэд хэдэн арга байдгаас хамгийн энгийн жишээ нь padding-г ашиглах юм.

<style>
.center {
  padding: 60px 0;
  border: 2px solid #3f9ce8;
}
</style>

padding болон text-align: center-г ашиглан хэвтээ болон босоо тэнхлэгт голлуулж болно.

<style>
.center {
  padding: 60px 0;
  border: 2px solid #3f9ce8;
  text-align: center;
}
</style>

Босоо тэнхлэгт голлуулах Line-height-г ашиглах

Босоо тэнхлэгт голлуулах өөр нэгэн арга нь line-height шинж чанарыг height-н хамт ашиглаж тэнцүү утга олгон.
height нь элементийн өндрийг заадаг бол line-height нь элементийн мөрийн өндрийг заадаг байна.

<style>
.center {
  line-height: 300px;
  height: 300px;
  border: 3px solid #3f9ce8;
  text-align: center;
}
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>

Босоо тэнхлэгт голлуулах Line-position transform

Босоо тэнхлэгт голлуулах өөр нэгэн арга нь transform шинж чанарыг ашиглаж болно.

<style>
.center {
  position: relative;
  height: 300px;
  border: 3px solid #3f9ce8;
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

Босоо тэнхлэгт голлуулах Flexbox

Босоо тэнхлэгт голлуулах өөр нэгэн арга нь Flexbox шинж чанарыг ашиглаж болно. Энэ нь Интернет хөтөч 10 ба түүнээс өмнөх хувилбар дээр ажиллахгүй болохыг анхаарна уу.

<style>
.center {
  display: flex;
  justify-content: right;
  align-items: center;
  height: 300px;
  border: 2px solid #3f9ce8; 
}
</style>

Сэтгэгдэлүүд

Saraba

ene dutuu bgamu bosoogoor yaj zeregtsvvleh we

March 26, 2020, 2:52 p.m.

ABCD.mn

Хичээлийг өнөөдөр гүйцээж оруулна.

March 27, 2020, 3:01 a.m.