Vertikal tekislash
Vertikal markazlash
CSS’da vertikal markazlash Flexbox va Grid kabi zamonaviy maket usullari yoki transformatsiyalar bilan joylashtirish orqali amalga oshirilishi mumkin.
Flexbox bilan markazga tekislash
CSS flexbox bilan flex konteyner ichida elementlarni gorizontal ham, vertikal ham markazlash mumkin.
justify-content va align-items xossalari ikkalasi center qilingan flex konteyner element(lar)ni markazda (ikkala o‘qda) tekislaydi:
Misol
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
O‘zingiz sinab ko‘ring »
Grid bilan markazga tekislash
CSS grid bilan grid konteyner ichida elementlarni gorizontal ham, vertikal ham markazlash mumkin.
place-items xossasi center qilingan grid konteyner element(lar)ni markazda (ikkala o‘qda) tekislaydi.
Misol
.center {
display: grid;
place-items: center;
height: 200px;
border: 3px solid
green;
}
O‘zingiz sinab ko‘ring »
position va transform bilan markazga tekislash
O‘lchamlari noma’lum yoki dinamik elementlar bilan ishlashda elementni markazlash uchun position: absolute; ni transform: translate(); bilan birga ishlatish keng tarqalgan usuldir:
Men vertikal va gorizontal markazlashtirilganman.
Misol
.container p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
O‘zingiz sinab ko‘ring »
Maslahat: Siz transform xossasi haqida bizning 2D Transforms bobimizda ko‘proq bilib olasiz.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!