CSS rasmni markazlash

Rasmlarni markazlash

CSS yordamida rasmlarni bir necha usulda markazlash mumkin.

Tasvir gorizontal, vertikal yoki ikkalasi ham markazlashtirilgan bo‘lishi mumkin.

Rasmni gorizontal markazlash

Gorizontal markazlashtirilgan tasvirni ko‘rsatish uchun biz margin: auto; yoki display: flex; dan foydalanishimiz mumkin.

1. margin: auto dan foydalanish

Rasmni gorizontal ravishda sahifaga markazlashtirish usullaridan biri margin: auto dan foydalanishdir.

<img> elementi standart holatda inline element bo‘lgani uchun (va margin: auto inline elementlarga ta’sir qilmaydi) rasmni display: block yordamida blok elementga aylantirishimiz kerak.

Bundan tashqari, biz width belgilashimiz kerak. Rasm kengligi sahifa kengligidan kichikroq bo‘lishi kerak.

Mana margin: auto yordamida gorizontal markazlashtirilgan rasm:

Misol

margin: auto yordamida gorizontal markazlashtirilgan rasm:

img {
display: block;
margin: auto;
width: 50%;
}

O‘zingiz sinab ko‘ring »

2. display: flex dan foydalanish

Rasmni gorizontal ravishda sahifaga markazlashtirishning yana bir usuli display: flex dan foydalanishdir.

Bu yerda <img> elementini <div> konteyner ichiga joylaymiz.

div konteynerga quyidagi CSS’ni qo‘shamiz:

display: flex
justify-content: center (rasmini div konteynerda gorizontal markazlaydi)

Keyin, biz rasm uchun width o‘rnatamiz. Rasm kengligi sahifa kengligidan kichikroq bo‘lishi kerak.

Mana display: flex yordamida gorizontal markazlashtirilgan rasm:

Misol

display: flex yordamida gorizontal markazlashtirilgan rasm:

div {
display: flex;
justify-content: center;
}

img {
width: 50%;
}

O‘zingiz sinab ko‘ring »

Vertikal va gorizontal markazlash

Vertikal ham, gorizontal ham markazlashtirilgan (haqiqiy markazlash) rasm ko‘rsatish uchun display: flex; yoki display: grid; dan foydalanish mumkin.

1. display: flex dan foydalanish

Rasmni flexbox yordamida ham vertikal, ham gorizontal markazda ko‘rsatish uchun quyidagilarning kombinatsiyasidan foydalanamiz:

display: flex;
justify-content: center; (rasmini konteynerda gorizontal markazlaydi)
align-items: center; (rasmini konteynerda vertikal markazlaydi)
height: 600px; (konteyner balandligi)

Bu yerda ham <img> elementini <div> konteyner ichiga joylaymiz.

Keyin, biz rasm uchun width o‘rnatamiz (konteyner kengligidan kichikroq bo‘lishi kerak).

Mana flexbox bilan vertikal va gorizontal markazlashtirilgan rasm:

Misol

display: flex yordamida haqiqiy markazlash:

div {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
border: 1px solid black;
}

img {
width: 50%;
}

O‘zingiz sinab ko‘ring »

2. display: grid dan foydalanish

Rasmni grid yordamida ham vertikal, ham gorizontal markazda ko‘rsatish uchun quyidagilarning kombinatsiyasidan foydalanamiz:

display: grid;
place-items: center; (rasmini konteynerda gorizontal va vertikal markazlaydi)
height: 600px; (konteyner balandligi)

Bu yerda ham <img> elementini <div> konteyner ichiga joylaymiz.

Keyin, biz rasm uchun width o‘rnatamiz (konteyner kengligidan kichikroq bo‘lishi kerak).

Mana grid bilan vertikal va gorizontal markazlashtirilgan rasm:

Misol

display: grid yordamida haqiqiy markazlash:

div {
display: grid;
place-items: center;
height: 600px;
border: 1px solid black;
}

img {
width: 50%;
}

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish