Jquery İle Div Ortalama

Merhaba arkadaşlar.
Jquery ile div içindeki bir divi nasıl ortalayabiliriz?

.Kapsayici { width:500px; margin: 0 auto; }
.Icerik { height: 20px; padding: 10px; }
<div class="Kapsayici">
   <div class="Icerik">Ortalanacak Olan Nesne</div>
</div>

 

Stillendirme, yerleştirme işlemleri için CSS kullanılır. jQuery ise daha çok atraksiyonlu yapılarda ve etkileşimli uygulamalarda kullanılır. Bu işlem için CSS kullanman gerekir. Bunu CSS ile yapman için Icerik nesnesinin sağ ve sol margin değerlerine auto vermen lazım. Kapsayıcıya da text-align: center; özelliğini vererek nesneyi ortalayabilirsin. Bkz;

.Kapsayici {
  text-align: center;
  width:500px;
}
.Icerik {
  height: 20px;
  margin: 0 auto;
  padding: 10px;
}

 

Soruyu sorarken en önemli kısımı unutmuşum Nurullah bey. Ben dikeyde ortalamak istiyorum.

Kapsayıcıya aşağıdaki kodları ekleyerek dikey ortalama yapabilirsin.

display: table-cell;
height: 500px;
vertical-align: middle;

Ekledikten sonra CSS kodları şu şekilde olacak.

.Kapsayici {
  background: #ddd;
  display: table-cell;
  height: 500px;
  text-align: center;
  vertical-align: middle;
  width:500px;
}
.Icerik {
  height: 20px;
  margin: 0 auto;
  padding: 10px;
}

 

Benim şu şekilde yapım var dediğinizi yaptım ama bir türlü ortalayamadım. Sola kayma oluyor nedense. Sorun nerde?

Css

.Header-Wrapper{
    background-color: #2e74a6;
}

.Header-Content{
    width: 920px;
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    height: 42px;
}

.Header-Left {
    float: left;
    width: 450px;
    height: 20px;
    padding: 5px;
    background-color: #fff;
}

.Header-Right {
    float: right;
    height: 20px;
    padding: 5px;
    background-color: #fff;
}

.Clean { clear: both; }

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="UTF-8">
    <title>Anasayfa</title>
</head>
<body>
    
    <!-- Header -->
    <div class="Header-Wrapper">
        <div class="Header-Content">
            <div class="Header-Left">Header Sol Menü</div>
            <div class="Header-Right">Header Sağ Menü</div>
            <div class="Clean"></div>
        </div>
    </div>
    <!--# Header #-->
    
</body>
</html>

 

Eğer Header-Content elementini dikeyde ortalamak istiyorsan aşağıdaki özellikleri Header-Wrapper sınıfına vermen gerekiyor.

.Header-Wrapper {
  background-color: #2e74a6;
  display: table-cell;
  height: 500px;
  vertical-align: middle;
}

 

Nurullah hocam dikeyde ortalama oluyor evet ama content divi margin: 0 auto; yu algılamıyor. Bunu çözemedim.

http://codepen.io/abdullah_/pen/OXyrGw

Teşekkürler.

Cevap Yaz

Cevap yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git