Tailwind CSS'de değiştirilen öğeler, içeriği harici bir kaynakla değiştirilen, örneğin resimler ve videolar gibi öğelerdir. Bazen kullanıcılar, kapsayıcı içinde değiştirilen bir öğeyi konumlandırmak için bir zorlukla karşılaşır. Bunun nedeni, boyutları mevcut alandan daha büyükse, bu öğelerin kapsayıcıdan taşabilmesidir. Tailwind CSS, değiştirilen bir öğenin içeriğinin kap içinde nasıl konumlandırıldığını ve hizalandığını kontrol etmek için yardımcı sınıflar sağlar.
Bu makale, Tailwind CSS'de değiştirilen öğeleri bir kap içinde konumlandırma yöntemini açıklayacaktır.
Tailwind'de Değiştirilen Öğeler Bir Kap İçinde Nasıl Konumlandırılır?
Değiştirilen öğeleri Tailwind'de bir kapsayıcı içinde konumlandırmak için bir HTML programı yapın ve ' nesne-
Sözdizimi
< eleman sınıf = 'nesne-
Örnek
Bu örnekte, bir konteyner yapacağız ve tüm ' nesne- Kap içindeki değiştirilen konumlarını belirtmek için ” (görüntü) öğeleri:
< vücut >
< div sınıf = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img sınıf = 'nesne-yok nesne-sol-üst w-24 h-24 my-4' kaynak = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img sınıf = 'nesne-yok nesne-sol w-24 sa-24' kaynak = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img sınıf = 'nesne-yok nesne-sol-alt w-24 h-24' kaynak = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img sınıf = 'nesne-yok nesne-üst w-24 h-24' kaynak = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img sınıf = 'nesne-yok nesne-merkez w-24 h-24' kaynak = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img sınıf = 'nesne-yok nesne-alt w-24 h-24' kaynak = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img sınıf = 'nesne-yok nesne-sağ üst w-24 h-24' kaynak = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img sınıf = 'nesne-yok nesne-sağ w-24 h-24' kaynak = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img sınıf = 'nesne-yok nesne-sağ-alt w-24 h-24' kaynak = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
vücut >
Burada, üst
- “ bg-gökyüzü-300 ” sınıfı, kabının arka plan rengini gökyüzü olarak ayarlar.
- “ Kafes ” sınıfı bir ızgara düzeni sağlar.
- “ ızgara-satırları-3 ” sınıfı, ızgaradaki satır sayısını 3 olarak ayarlar.
- “ grid-flow-col ” sınıfı, sütunlardaki ızgara öğelerinin akışını tanımlar.
- “ m-5 ” sınıfı, kabın çevresine 5 birim kenar boşluğu ekler.
- “ uzay-y-4 ” sınıfı, kap içindeki alt
öğeleri arasına 4 birimlik dikey bir boşluk ekler.
- “ p-4 ” sınıfı, kapsayıcı içindeki içeriğe 4 birim dolgu ekler.
- “ haklı çıkarmak ” sınıfı, kapsayıcı içindeki alt öğeleri hizalar ve bunları eşit olarak dağıtır.
öğelerinde:
- “ nesne-yok ” sınıfı, öğeye herhangi bir konum uygulamaz ve öğeyi kapsayıcıdaki varsayılan konumunda görüntüler.
- “ nesne-sol-üst ” sınıfı,
öğesini kapsayıcısının sol üst köşesine konumlandırır.
- “ nesne solu ” sınıfı, öğeyi kabın sol kenarına hizalar ve dikey olarak ortalanmış halde tutar.
- “ nesne-sol-alt ” sınıfı,
öğesini kapsayıcısının sol alt köşesine konumlandırır.
- “ nesne üstü ” sınıfı, öğeyi bulunduğu kabın üst kenarına yerleştirir ve yatay olarak ortalanmış olarak ayarlar.
- “ nesne merkezi ” class, öğeyi kabın merkezine konumlandırır ve yatay ve dikey olarak ortalanmış halde tutar.
- “ nesne tabanı ” class, öğeyi bulunduğu kabın alt kenarına konumlandırır ve yatay olarak ortalanmış halde tutar.
- “ nesne-sağ-üst ” sınıfı,
öğesini kabın sağ üst köşesine konumlandırır.
- “ nesne-sağ ” sınıfı, öğeyi bulunduğu kabın sağ kenarına konumlandırır ve onu dikey olarak ortalanmış halde tutar.
- “ nesne-sağ-alt ” sınıfı, öğeyi kapsayıcısının sağ alt köşesine konumlandırır.
Çıktı
Yukarıdaki web sayfasında, değiştirilen öğenin tüm içeriğinin başarıyla konumlandırıldığı görülmektedir.
Çözüm
Değiştirilen öğeleri Tailwind'de bir kapsayıcıya yerleştirmek için ' nesne-
” yardımcı programları, görüntüler gibi istenen öğelerle birlikte kullanılır. Kullanıcıların, değiştirilen öğeleri konumlandırmak için 'object- ' yardımcı programında belirli konumu veya tarafı, yani sol, sağ veya merkez tanımlaması gerekir. Bu makale, Tailwind CSS'de değiştirilen öğeleri bir kap içinde konumlandırma yöntemini göstermektedir.