CSS ile Resim, Yazı, Sayfa Ortalama Örnekleri

Css ile sayfaları, yazıları veya resimleri ortalamak mümkündür. Aşağıda resimler yazılar ve diğer birçok örnekleri bulabilirsiniz.

1. display: flex ve justify-content: center kullanarak bir div’in içindeki öğeleri ortalamak:

.container {
  display: flex;
  justify-content: center;
}

2. text-align: center kullanarak bir paragrafın içindeki yazıyı ortalama kodunu şu şekilde gösterebiliriz.:

p {
  text-align: center;
}

3. margin: auto kullanarak bir resmi ekranın tam ortasına yerleştirmek için:

img {
  display: block;
  margin: auto;
}

4. position: absolute ve left: 50% kullanarak bir div’i ekranın ortasına yerleştirmek:

.box {
  position: absolute;
  left: 50%%;
  transform: translate(-50%%, 0);
}

5. display: grid ve place-items: center kullanarak bir div’in içindeki öğeleri ortalamak:

.container {
  display: grid;
  place-items: center;
}

6. display: table ve margin: auto kullanarak bir div’i ekranın ortasına yerleştirmek:

.box {
  display: table;
  margin: auto;
}

7. display: table-cell ve vertical-align: middle kullanarak bir div’in içindeki öğeleri dikey olarak ortalamak:

.container {
  display: table-cell;
  vertical-align: middle;
}

Benzer Konular:

HTML CSS Açılır Menü Örnekleri

HTML ve CSS ile Animasyonlu Arama Kutusu