İçeriği Dikey Olarak Hizalamak için 6 CSS Püf Noktası

Şimdi CSS'deki dikey hizalama hakkında konuşalım ya da nasıl yapılamayacağı konusunda daha kesin olalım. CSS, içeriğini kabı içinde dikey olarak ortalamak için resmi bir yol sağlamadı. Muhtemelen her yerde sinir bozucu web geliştiricileri olması bir problem. Ama korkmamak için, bu yazıda, size yardımcı olabilecek birkaç püf noktası tarafından sizin tarafınızdan geçeceğiz. etkiyi taklit etmek.

Bununla birlikte, bu püf noktaları sınırlamaları olabilir ve birden fazla numara kullan yanılsamayı tamamlamak için. Başka bir numara biliyorsanız, yorumlarda bize bildirin..

1. Mutlak Konumlandırma kullanın

Burada göreceğimiz ilk numara, pozisyon özelliği. Sende iki tane var

, biri konteyner, diğeri, içeriği içeren alt öğedir..

İlk önce konteyner elemanının konumunu göreceli olarak ayarlayacağız, sonra alt eleman konumunu kesin. Bu, kabın karşısına serbestçe yerleştirmemizi sağlar.

Dikey olarak hizalamak için, alt elemanın konumunu üstten, kabın yüksekliğinin yarısına kadar hareket ettirin ve alt elemanın genişliğinin yarısına kadar yukarı çekin. İşte çıktı:

Bu numara sadece tek bir çocuk unsur olduğunda mükemmeldir, yoksa kesin pozisyon aynı konteyner içindeki diğer elemanı etkileyecektir.

2. CSS3 Transform'u kullanın

CSS3 Dönüşümü içeriğin merkeze yerleştirilmesini kolaylaştırdı. CSS3 Dönüşümü, aksine pozisyon özellik, aynı konteyner içindeki diğer elemanların konumunu etkilemeyecektir.

Önceki yöntemle aynı HTML yapısına sahip olduğumuzu varsayalım - bir ebeveyn, bir alt öğe - % 50 yukarıdan ve CSS dönüşümü kullanarak bir çevirisini verir -% 50. İşte buyur.

CSS3 Dönüşümleri'nin Internet Explorer 8 ve daha düşük sürümlerde çalışmadığını unutmayın. Buradaki diğer yöntemlerden herhangi birini bir geri dönüş olarak kullanmak isteyebilirsiniz..

3. Dolgu kullanın

Biz de kullanabilirsiniz dolgu malzemesi dikey hizalama yanılsaması yaratmak için. Bunu yapmak için, üst ve alt dolguyu aşağıdaki gibi eşit şekilde ayarlamak yeterlidir:

Bu numara, kabı sabit bir genişlikte ayarlamadığınızda uygundur, sadece genişliği ayarlayın Oto.

4. Hat Yüksekliğini Kullan

Bir kap içinde yalnızca tek bir metin içeriği satırınız varsa, metni kullanarak metni dikey olarak hizalayabilirsiniz. satır yüksekliği özelliği. Yı kur satır yüksekliği kabın yüksekliği ile yaklaşık aynı değerde ise aşağıdaki çıktısını göreceksiniz..

Unutmayın, bu numara sadece bir satır metin ile çalışır. İçerik iki veya daha fazla satıra bölünürse, her satır arasındaki boşluk satır yüksekliği, bize çok fazla boşluk vermek.

5. CSS Tablosunu kullanın

Şahsen, CSS Tablosunu kullanmak, dikey hizalamayı uygulamak için en sevdiğim numaradır. Internet Explorer 8 gibi eski tarayıcılarda çalışır. Bu yöntem, kap öğesi göstergesini tablo, alt öğe olarak görüntülenecek Tablo hücreli sonra kullan dikey hizalama metni dikey olarak ortalamak için özellik.

6. Flexbox kullanın

Dikey merkezlemeye son yöntem Flexbox'ı kullanmaktır. Flexbox, CSS3'te yeni bir modül. İçeriği hizalamak için daha basit bir yöntem sunar. İçeriği esnek kutuda dikey olarak ortalamak için hizalama ögeleri: orta; şöyle, ve bu.

Flexbox'ın bazı tarayıcıların Flexbox modülünün yalnızca Internet Explorer 10, Safari, 6 ve Chrome 27 ve altındaki gibi kısmi özelliklerini desteklediğini unutmayın. Bu nedenle, CSS3 Transform ile numaraya benzer şekilde, efektin bu tarayıcıda iyi bir şekilde kaldığından emin olun.