CSS Kullanarak Bir Div'i Yatay Olarak Ortalama

Mia Chevalier
16 Haziran 2024 Pazar 02:58:10
HTML and CSS

CSS ile Div Hizalamasında Uzmanlaşmak

Öğeleri CSS'de yatay olarak ortalamak, web geliştiricilerinin karşılaştığı yaygın bir görevdir. İster bir düğmeyi, görüntüyü veya div'i hizalıyor olun, mükemmel hizalamaya ulaşmak bazen zor olabilir. Bu kılavuzda, bir görüntüyü yatay olarak ortalamak için çeşitli yöntemleri inceleyeceğiz.

başkasının içinde
CSS kullanarak.

Bu teknikleri anlayıp uygulayarak web öğelerinizin tam olarak istediğiniz yere konumlandırılmasını sağlayabilirsiniz. Bu temel CSS becerisini kapsamlı bir şekilde anlamanızı sağlamak için flexbox, grid ve geleneksel yöntemler dahil olmak üzere farklı yaklaşımları ele alacağız.

Emretmek Tanım
display: flex; Esnek bir kapsayıcı tanımlar ve esnek kutu düzenini etkinleştirir.
justify-content: center; Öğeleri esnek bir kap içinde yatay olarak ortalar.
align-items: center; Öğeleri esnek bir kap içinde dikey olarak ortalar.
place-items: center; Öğeleri bir ızgara kapsayıcısında hem yatay hem de dikey olarak ortalar.
transform: translate(-50%, -50%); Bir öğeyi ortalamak için kendi genişliğinin ve yüksekliğinin %50'si kadar kaydırır.
position: absolute; Bir öğeyi en yakın konumdaki atasına göre konumlandırır.
top: 50%; Bir öğeyi, içinde bulunduğu öğenin üst kısmından %50 uzağa yerleştirir.
left: 50%; Bir öğeyi, içinde bulunduğu öğenin %50 solundan konumlandırır.

Flexbox, Grid ve Geleneksel CSS ile Öğeleri Merkezleme

İlk komut dosyası bir dosyanın nasıl merkezleneceğini gösterir.

kullanarak . Ayarlayarak ana kapsayıcıda alt öğeler esnek öğeler haline gelir. özellik bu öğeleri yatay olarak ortalar, align-items: center; onları dikey olarak ortalar. Bu yöntem oldukça çok yönlüdür ve dinamik düzenler için iyi çalışır.

İkinci senaryoda şunu kullanıyoruz: benzer sonuçlara ulaşmak için. Başvuru yaparak ana konteynere ve alt öğeler hem yatay hem de dikey olarak ortalanır. Bu yöntem özellikle ızgara tabanlı düzenler için kullanışlıdır. Son olarak, geleneksel yöntem ayarlamayı içerir. position: absolute; alt öğede ve kullanımında Ve ile onu ebeveynin içinde ortalamak için. Bu yaklaşım sabit boyutlu elemanlar için etkilidir.

Bir Div'i Yatay Olarak Ortalamak için Flexbox'ı Kullanma

Flexbox ile HTML ve CSS

<!DOCTYPE html>
<html>
<head>
<title>Flexbox Centering</title>
<style>
#outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightblue;
  border: 1px solid blue;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Div'i CSS Grid ile Ortalamak

Izgara Düzeni ile HTML ve CSS

<!DOCTYPE html>
<html>
<head>
<title>Grid Centering</title>
<style>
#outer {
  display: grid;
  place-items: center;
  height: 100vh;
  border: 1px solid black;
}
#inner {
  padding: 20px;
  background-color: lightgreen;
  border: 1px solid green;
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

CSS ile Ortalamanın Geleneksel Yöntemi

Otomatik Marj ile HTML ve CSS

<!DOCTYPE html>
<html>
<head>
<title>Traditional Centering</title>
<style>
#outer {
  width: 100%;
  height: 100vh;
  border: 1px solid black;
  position: relative;
}
#inner {
  width: 50px;
  padding: 20px;
  background-color: lightcoral;
  border: 1px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}</style>
</head>
<body>
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
</body>
</html>

Merkezleme Elemanları için İleri Teknikler

Elemanları bir kap içinde yatay olarak ortalamak için başka bir yöntem, mülk. Bu yaklaşım özellikle satır içi blok veya satır içi öğeler için etkilidir. Başvuru yaparak ana kaba göre tüm alt öğeler yatay olarak ortalanacaktır. Ancak bu yöntem, satır içi bloğa dönüştürülmediği sürece blok düzeyindeki öğeler için çalışmaz.

Ek olarak şunları kullanabilirsiniz: Blok düzeyindeki elemanları ortalamak için özellik. Bir öğenin sol ve sağ kenar boşluklarını otomatik olarak ayarlayarak onu ana kapsayıcısının içinde yatay olarak ortalayabilirsiniz. Bu teknik basittir ve sabit genişlikli elemanlar için iyi çalışır. Bu yöntemleri Flexbox ve Grid gibi modern CSS mizanpaj teknikleriyle birleştirmek, öğeleri tam olarak gerektiği gibi hizalamak için kapsamlı bir araç seti sağlar.

  1. Satır içi bir öğeyi nasıl ortalarım?
  2. Kullanmak satır içi öğeleri ortalamak için ana kapsayıcıda.
  3. Marjı kullanabilir miyim: auto; bir blok öğesini ortalamak için?
  4. Evet, ayar sol ve sağ taraflarda bir blok elemanı ortalanacaktır.
  5. Merkezleme için Flexbox ve Grid arasındaki fark nedir?
  6. tek boyutlu düzenler için kullanılırken, iki boyutlu düzenler içindir.
  7. Sabit genişlikli bir öğeyi CSS ile nasıl ortalarım?
  8. Kullanmak veya ile
  9. Flexbox ile öğeleri dikey olarak ortalayabilir miyim?
  10. Evet, kullan elemanları esnek bir kapta dikey olarak ortalamak için.
  11. Metni hizalar mı: ortalar; blok elemanları için çalışıyor musunuz?
  12. HAYIR, yalnızca satır içi veya satır içi blok öğeleri için çalışır.
  13. Bir kapsayıcıda birden çok öğeyi nasıl ortalarım?
  14. Kullanmak ile Ve
  15. Yer öğeleri nedir: merkez; Grid'de mi?
  16. öğeleri bir ızgara kapsayıcısında hem yatay hem de dikey olarak ortalar.
  17. Flexbox veya Grid olmadan elemanları ortalamak mümkün mü?
  18. Evet, gibi yöntemleri kullanarak , , veya aynı zamanda elemanları da merkezleyebilir.

CSS Merkezleme Tekniklerini Tamamlama

Farklı CSS yöntemleri kullanarak öğelerin yatay olarak nasıl ortalanacağını anlamak, görsel olarak çekici web düzenleri oluşturmak için çok önemlidir. Gibi tekniklere hakim olarak , , Ve geliştiriciler tasarımlarının hem işlevsel hem de estetik açıdan hoş olmasını sağlayabilirler. Bu yöntemlerle denemeler yapmak, CSS yeteneklerinin daha derinlemesine anlaşılmasını sağlayacaktır.