CSS kullanarak bir DIV Nasıl Ortalanır [5 Hızlı Yöntem]

Kodlama becerilerinizle projeler oluşturmaya başladıysanız, muhtemelen öğeleri bir sayfada ortalamanın zorluğuyla karşı karşıya kalmışsınızdır. "Bir div'i nasıl ortalarım?" hemen hemen her web geliştiricisinin karşılaştığı bir şeydir.

Bu blog, CSS kullanarak öğeleri ortalamanın kolay yollarını keşfedecek. Temel yöntemlerden modern tekniklere kadar öğelerin yatay ve dikey olarak nasıl merkezleneceğini ele alacağız. Her yöntem basit örneklerle açıklanacak, böylece tam olarak nasıl çalıştığını görebilirsiniz.

İster CSS'de yeni olun ister hızlı bir bilgi tazelemeye ihtiyacınız olsun, bu kılavuz web sayfalarınızdaki öğeleri ortalama konusunda uzmanlaşmanıza yardımcı olacaktır. Hadi başlayalım!

DIV nedir ve neden bir DIV'yi ortalamayı düşünmelisiniz?

Div veya bölüm, bir web sayfasındaki diğer öğeleri gruplamak için kap görevi gören temel bir HTML öğesidir.

Bunu metin, resim veya diğer öğeler gibi içerikleri düzenlemek için kullanabileceğiniz bir kutu gibi düşünün. Div'ler, web sayfalarınızdaki içeriği yapılandırmak ve şekillendirmek, onları daha organize ve görsel olarak çekici kılmak için gereklidir.

Neden Div'i Ortalamayı Düşünmelisiniz?

Bir div'i ortalamak, Kullanıcı Deneyimi açısından çok önemlidir. Ancak bir web sayfasının görünümünü ve düzenini önemli ölçüde iyileştirebileceğinden, web geliştiricileri için stil oluşturma konusunda zorluk yaratabilir.

Merkezlemenin neden önemli olduğu aşağıda açıklanmıştır:

• Geliştirilmiş Okunabilirlik ve Estetik: İçeriği ortalamak, görsel olarak daha çekici hale getirebilir ve kullanıcıların düğmeler, formlar veya resimler gibi temel öğelere odaklanmasını kolaylaştırabilir.
• Duyarlı Tasarım: Düzeniniz farklı ekran boyutlarına uyum sağladığında ortalama, içeriğinizin masaüstü bilgisayarlardan akıllı telefonlara kadar tüm cihazlarda dengeli kalmasını ve iyi görünmesini sağlamaya yardımcı olur.
• Temel Unsurları Vurgulamak: Ortalamak, "Kaydol" düğmesi veya öne çıkan bir görsel gibi önemli bölümlere veya harekete geçirici mesajlara dikkat çekmenin harika bir yoludur.
• Daha Temiz, Daha Profesyonel Düzenler: Ortalanmış bir düzen genellikle daha temiz ve daha gösterişli görünür ve sitenize daha profesyonel bir his verir.

CSS kullanarak bir DIV nasıl ortalanır (Farklı Yöntemler)

Bir div'i ortalamak, yatay mı, dikey mi yoksa her ikisini birden mi ortalamak istediğinize bağlı olarak birkaç farklı yolla yapılabilir. İşte bazı basit yöntemler:

CSS kullanarak bir div'i ortalamanın en popüler yöntemlerinden bazıları şunlardır:

Yöntem 1: Otomatik Kenar Boşluklarıyla Div Nasıl Ortalanır?

Web tasarımında yeniyseniz, öğeleri bir web sayfasında ortalamak zor görünebilir, ancak bir kez alıştığınızda oldukça basittir. Bir div yatay olarak ortalamanın klasik ve basit yöntemlerinden biri otomatik kenar boşluklarını kullanmaktır. Adım adım parçalayalım.

1. Bilmeniz Gerekenler

Bir div otomatik kenar boşluklarıyla yatay olarak ortalamak için şu adımları izleyin:

• 1. Genişliği Kısıtlayın: Öncelikle div kabının tüm genişliğini kaplamadığından emin olun. Varsayılan olarak div tüm genişliği dolduracak şekilde genişler. Ortalamak için maksimum genişliği ayarlamanız gerekir.

• 2. Otomatik Kenar Boşluklarını Kullanın: Sol ve sağ taraftaki otomatik kenar boşlukları div merkeze itecektir.

İşte basit bir örnek:

HTML

<div class="centered-div">This is a centered div</div>

css

.centered-div {

max-width: fit-content; /* Makes the div only as wide as its content */

margin-left: auto; /* Pushes the div to the right */

margin-right: auto; /* Pushes the div to the left, centering it */
}

2. Neden max-width: fit-content; ?

max-width: fit-content; kuralı, div içeriğine bağlı olarak yalnızca ihtiyaç duyduğu kadar genişlik kaplamasını sağlar. 200px gibi sabit bir genişlik kullandıysanız, kap çok darsa div taşabilir. fit-content div boyutunu içeriğine uyacak şekilde dinamik olarak ayarlar.

3. Otomatik Kenar Boşlukları Nasıl Çalışır?

Otomatik kenar boşlukları aç su aygırları gibi hareket ederek div'i ortalamak için her iki tarafta eşit miktarda ekstra alan tüketir. Bu yöntem, farklı diller için otomatik olarak ayarlanır ve diğer öğeleri etkilemeden tek öğeleri ortalamak için mükemmeldir.

Her iki kenar boşluğu da auto olarak ayarlandığında, ekstra alanı eşit olarak paylaşırlar, bu da div ortalar.

4. Modern Kısayol Kullanma: margin-inline

margin-left ve margin-right ayrı ayrı ayarlamak yerine, daha temiz bir yaklaşım için margin-inline özelliğini kullanabilirsiniz:

.centered-div {

maksimum genişlik: uygun içerik;

satır içi kenar boşluğu: otomatik; /* Sol ve sağ kenar boşluklarını otomatik olarak otomatik olarak ayarlar */

}

Yöntem 2: Flexbox ile DIV Nasıl Ortalanır

Flexbox, öğeleri her iki yönde de ortalamayı kolaylaştırır. Flexbox'ı kullanarak tek bir öğeyi şu şekilde ortalayabilirsiniz:

.konteyner {

ekran: esnek;

yasla-içerik: merkez; /* Yatay olarak ortalar */

hizalama öğeleri: merkez; /* Dikey olarak ortalar */

}

Bu örnekte .container , Flexbox'ı kullanacak şekilde ayarlanmıştır. justify-content: center özelliği öğeyi yatay olarak ortalar, align-items: center ise dikey olarak ortalar.

Dikkate alınması gereken bazı Önemli Noktalar:

Yatay ve Dikey Ortalama: Flexbox, kaplarından taşsalar bile öğeleri hem yatay hem de dikey olarak ortalamayı kolaylaştırır.

Çoklu Öğeler : Flexbox ayrıca birden fazla öğeyi iyi bir şekilde işler. Öğeleri bir satırda flex-direction için flex-direction: row row'u veya dikey bir yığın için flex-direction : sütununu kullanabilirsiniz. gap eklemek öğeler arasındaki boşluğu ayarlayabilir.

Bu yöntem çok esnektir ve öğeleri çeşitli düzenlerde ortalamak için yaygın olarak kullanılır.

Yöntem 3: Görünüm Alanında DIV Nasıl Ortalanır?

Açılır pencere veya banner gibi bir öğeyi ekranın ortasında (görüntü alanı) ortalamak istediğinizde CSS konumlandırmasını kullanabilirsiniz. İşte bunu yapmanın basit bir yolu:

1. Sabit Pozisyonlu Temel Merkezleme

Bir öğeyi hem yatay hem de dikey olarak ortalamak için aşağıdaki adımları kullanın:

• Konumu Sabit olarak Ayarla:

– position: fixed; siz kaydırdıkça öğenin yerinde kalmasını sağlar. Öğeyi ekrana yapıştırmak gibidir.

• Sabitlemek için İç Metin'i kullanın:

– inset: 0px; öğenin görünüm alanının kenarlarından (üst, sağ, alt, sol) uzaklığını 0 piksele ayarlamak için kullanılan bir kısayoldur. Bu, öğeyi tüm ekranı dolduracak şekilde genişletir.

• Boyutu Sınırla :

– Öğenin boyutunu tanımlamak için width ve height ayarlayın.

– Daha küçük ekranlarda taşmadığından emin olmak için max-width ve max-height kullanın.

• Otomatik Kenar Boşluklarıyla Ortala : – margin: auto; elemanı merkezler. Etrafındaki ekstra alanı eşit şekilde bölerek ortalanmasını sağlar.

Örnek Kod:

.öğe {

konum: sabit;

ek: 0; /* Elemanı tüm kenarlara tutturur */

genişlik: 12rem; /* Sabit bir genişlik belirler */

yükseklik: 5rem; /* Sabit bir yükseklik belirler */

maksimum genişlik: 100vw; /* Görüntü alanı genişliğini aşmamasını sağlar */

maksimum yükseklik: 100dvh; /* Görüntü alanı yüksekliğini aşmamasını sağlar */

kenar boşluğu: otomatik; /* Elemanı ortalar */

}

2. Yalnızca Yatay Olarak Merkezleme

Bir öğeyi yalnızca yatay olarak ortalamak istiyorsanız (örneğin, altta bir çerez başlığı), şunu yapın:

• Sabit Pozisyon:

– position: fixed; elemanı yerinde tutar.

• Kenarlara Sabitleme:

– left: 0; ve right: 0; yatay olarak bir taraftan diğerine uzatmak için.

– bottom: 8px; alt kenardan konumlandırmak için.

• Sınırla ve Ortala:

– Sabit bir genişlik ayarlayın.

– margin-inline: auto; yatay olarak ortalamak için.

Örnek Kod:

.element {

position: fixed;

left: 0;

right: 0;

bottom: 8px; /* Positions from the bottom edge */

width: 12rem; /* Sets a fixed width */

max-width: calc(100vw - 16px); /* Ensures it fits within the viewport with some buffer */

margin-inline: auto; /* Centers horizontally */

}

3. Boyutları Bilinmeyen Merkezleme Elemanları

Öğenin boyutunu bilmiyorsanız ancak yine de ortalanmasını istiyorsanız:

• Fit-İçeriği Kullan:

– width: fit-content; ve height: fit-content; öğenin içeriği etrafında daralmasına izin verin.

• Merkezlemeyi Uygula:

– position: fixed; ve margin: auto; merkezlemek için.

Örnek Kod:

.element {

position: fixed;

inset: 0;

width: fit-content; /* Shrinks to fit content */

height: fit-content; /* Shrinks to fit content */

margin: auto; /* Centers the element */

}

Bu yöntemlerle, boyutları ne olursa olsun öğeleri görünüm alanında kolayca ortalayabilirsiniz.

Yöntem 4: CSS Izgarasıyla DIV Nasıl Ortalanır?

CSS Grid, düzen tasarımı için güçlü bir araçtır ve özellikle öğeleri ortalamak için kullanışlıdır. CSS Grid'i kullanarak bir şeyi hem yatay hem de dikey olarak kolayca nasıl ortalayabileceğiniz aşağıda açıklanmıştır:

1. Tek Bir Elemanı Merkezlemek

Bir öğeyi kapsayıcısı içinde ortalamak için CSS Grid ile basit bir kurulum kullanabilirsiniz:

• Izgara Görünümünü Ayarlama:

– display: grid; kabı bir ızgaraya dönüştürür.

• Yer İçeriğini Kullan:

– place-content: center; içeriği hem yatay hem de dikey olarak ortalayan bir kısayoldur. Hem justify-content (yatay) hem de align-content (dikey) center ayarlar.

Örnek Kod:

css

.konteyner {

ekran: ızgara;

yer içeriği: merkez; /* İçeriği hem yatay hem de dikey olarak ortalar */

}

Bu, boyutundan bağımsız olarak öğenin kabının tam ortasında durmasını sağlar.

2. Flexbox'tan Farklar

CSS Izgarası öğeleri ortalayabilse de Flexbox'a kıyasla farklı davranır:

– Flexbox: Öğeleri boyutlarına ve kap boyutlarına göre ortalar.

– CSS Izgarası: Öğeleri ızgara hücresinin boyutuna göre ortalar; ızgara hücresi boyutu tanımlanmamışsa bu durum zor olabilir.

Yüzdelerle Izgarada Örnek Kod:

css

.konteyner {

ekran: ızgara;

yer içeriği: merkez;

}

.öğe {

genişlik: %50; /* Genişlik ızgara hücresinin %50'sidir */

yükseklik: %50; /* Yükseklik ızgara hücresinin %50'sidir */

}

Izgara hücresi boyutu belirtilmezse öğe beklenenden daha küçük olabilir. Flexbox temel merkezleme için genellikle daha basittir.

3. Birden Fazla Elemanı Ortalamak

CSS Grid aynı hücrede birden fazla öğeyi de işleyebilir:

• Aynı Hücreye Birden Çok Öğe Atama:

– Öğeleri aynı ızgara hücresine yerleştirmek için grid-row ve grid-column kullanın.

• Hücrenin İçindeki Öğeleri Ortalayın:

– place-items: center; Izgara hücresi içindeki öğeleri ortalamak için.

Örnek Kod:

css

.konteyner {

ekran: ızgara;

yer içeriği: merkez; /* Izgara hücresini ortalar */

yer öğeleri: merkez; /* Hücre içindeki öğeleri ortalar */

}

.öğe {

ızgara sırası: 1;

ızgara sütunu: 1; /* Tüm elemanlar aynı hücreye yerleştirilir */

}

Bu kurulum, farklı boyutlara sahip olsalar bile birden fazla öğeyi kabın ortasına istifler.

Önemli Noktalar

– CSS Grid, karmaşık düzenler için ve yerleştirme üzerinde hassas kontrole ihtiyaç duyduğunuzda mükemmeldir.

– Flexbox, basit merkezleme görevleri için genellikle daha basittir.

Bu temel bilgilerle, çeşitli senaryolarda hem tek hem de birden çok öğeyi ortalamak için CSS Grid'i kullanabilirsiniz.

Yöntem 5: CSS'de Metin Nasıl Ortalanır?

Metni ortalamak, resimler veya div'ler gibi diğer öğeleri ortalamaktan biraz farklıdır. İşte bunu yapmanın basit bir yolu:

Bir Metin Bloğunu Ortalamak

Bir metin bloğunu bir kabın içinde ortalamak istediğinizde (div'deki bir paragraf gibi), text-align özelliğini kullanırsınız. Bu, metin div , p veya h1 gibi blok düzeyinde bir öğenin içinde olduğunda en iyi sonucu verir.

Bunu nasıl yapacağınız aşağıda açıklanmıştır:

css

.konteyner {

metin hizalama: ortala;

}

Bu kod, tarayıcıya metni kabın içinde ortalamasını söyler. Kabın kendisini de ortalamak istiyorsanız bunun için Flexbox veya Grid'i kullanabilirsiniz:

css

.konteyner {

ekran: esnek;

yasla-içerik: merkez;

hizalama öğeleri: merkez;

yükseklik: 100vh; /* Dikey ortalama için konteyneri tam yükseklikte yapar */

}

Flexbox ve Grid'e ne dersiniz?

Flexbox ve Grid, kapların tamamını ortalamak için mükemmeldir, ancak metni bu kapların içinde ortalamazlar. Bir paragrafı ortalamak için Flexbox veya Grid'i kullanırsanız, içindeki tek tek satırları veya karakterleri değil, metin bloğunu ortalar.

Flexbox ile Metni Ortalamak

Bir paragrafı ortalamak için Flexbox'ı kullanırsanız şu şekilde:

css

.konteyner {

ekran: esnek;

yasla-içerik: merkez;

hizalama öğeleri: merkez;

yükseklik: 100vh;

}

Paragrafın tamamını kapsayıcı içinde ortalar. Ancak metnin kendisini bu paragrafın içinde ortalamak için ayrıca text-align: center; .

Gelecekteki CSS Özellikleri

CSS'de heyecan verici bir gelişme var! Merkezlemeyi daha da kolaylaştıracak yeni özellikler geliyor. Şimdilik Flexbox veya Grid'i text-align: center; ile kullanmak bunu halletmenin en iyi yoludur.

Bu basit yaklaşım, sayfanızın neresinde olursa olsun metninizin iyi ve ortalanmış görünmesini sağlar!

Ancak yukarıdaki yöntemlerin tümünü göz önünde bulundurduğunuzda, farklı durumlar için hangisinin en uygun olduğu konusunda kafanız karışabilir. Eğer durum buysa, aşağıdaki sonuca göz atın.

Çözüm

Bu blogda, Flexbox ve otomatik kenar boşlukları gibi çeşitli araçları kullanarak bir DIV öğesini yatay, dikey olarak ve sayfanın ortasına nasıl ortalayacağınızı öğrendiniz. Bu araçların her birinin kendine has faydaları ve kullanım senaryoları vardır. Size yardımcı olmak için aşağıda bazı yaygın kullanım durumları verilmiştir:

• Otomatik Kenar Boşlukları: Basit yatay ortalama için bunu kullanın.
• Flexbox: Öğeleri her iki yönde ortalamak için ve bir öğe satırı veya sütunuyla çalışırken en iyisi.
• Görünüm Merkezi Merkezleme: Açılır pencereler veya ekranda ortalanması gereken öğeler için idealdir.
• CSS Izgarası: Karmaşık düzenler için ve hem satırları hem de sütunları ortalamak gerektiğinde idealdir.

Bu yazıyla ilgili herhangi bir sorunuz veya şüpheniz varsa, lütfen aşağıdaki yorum bölümünde bize bildirin:

Rahul

Rahul Kumar, WordPress ve web barındırma konusunda uzmanlaşmış bir web tutkunu ve içerik stratejistidir. Yılların deneyimi ve sektör trendlerini takip etme kararlılığıyla trafiği yönlendiren, etkileşimi artıran ve dönüşümleri artıran etkili çevrimiçi stratejiler oluşturuyor. Rahul'ın ayrıntılara olan ilgisi ve ilgi çekici içerik oluşturma yeteneği, onu çevrimiçi varlığını geliştirmek isteyen her marka için değerli bir varlık haline getiriyor.