Dikey hizalama: orta neden yayılma alanımda veya div'de çalışmıyor?

Ben dikey merkez a çalışıyorum spanya divbaşka dahilinde elemanındiv . Ancak koyduğumda vertical-align: middlehiçbir şey olmuyor. Her displayiki öğenin özelliklerini değiştirmeyi denedim ve hiçbir şey işe yaramıyor.

Şu anda web sayfamda yaptığım şey bu:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}

<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

İşte uygulamanın işe yaramadığını gösteren bir jsfiddle: http://jsfiddle.net/gZXWC/

Bu en iyi yol gibi görünüyor - orijinal yazımdan bu yana biraz zaman geçti ve şu anda yapılması gerekenler: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

CSS3 kullanma:

<div class="outer">
   <div class="inner"/>
</div>

css:

.outer {
  display : flex;
  align-items : center;
  justify-content: center;
}

Not: Bu eski IE'lerde çalışmayabilir

Bunu deneyin, benim için çok iyi çalışıyor:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Çizgi yüksekliğinin div içerdiği yüksekliğe ayarlanması da işe yarar

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
    line-height:72px;
    border: 1px solid #000000;
}

Eğer flexbox'a ... Yeri güvenemez .childiçine .parent'ın merkezi. Piksel boyutları bilinmediğinde (başka bir deyişle, her zaman) ve IE9 + ile de sorun olmadığında çalışır.

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}

<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>

Sen koymalıyız vertical-align: middleiç elemanı, üzerinde değil , dış eleman. line-heightDış elemandaki özelliği, dış elemanla eşleşecek şekilde ayarlayın height. Sonra display: inline-blockve line-height: normaliç eleman üzerine yerleştirin. Bunu yaparak, iç elemandaki metin normal bir satır yüksekliği ile sarılır. Chrome, Firefox, Safari ve IE 8+ sürümlerinde çalışır

.main {
    height: 72px;
    line-height:72px;
    border: 1px solid black;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

Vaktini boşa harcamak

Bunu herkese yardımcı olması durumunda sarmalayıcı div'ın merkezindeki her şeyi hizalamak için kullandım - en basitini buldum:

div.wrapper {
  /* --- This works --- */
  display: flex;
  /* Align Vertically */
  align-items: center;
  /* Align Horizontally */
  justify-content: center;
  /* --- ---------- ----- */
  width: 100%;
  height:100px;
  background-color: blue;
}
div.inner {
  width: 50px;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="inner">
  </div>
</div>

Burada dikey bir hizalama yapmanın iki yolunun bir örneği var. Onları kullanıyorum ve gayet iyi çalışıyorlar. Biri mutlak konumlama, diğeri flexbox kullanıyor .

Dikey Hizalama Örneği

Flexbox'a kullanarak, başka elemanın içine kendiliğinden unsurunu hizalayabilirsiniz display: flex;kullanarak align-self. Yatay olarak da hizalamanız gerekiyorsa , kapta align-itemsve justify-contentiçinde kullanabilirsiniz .

Flexbox kullanmak istemiyorsanız position özelliğini kullanabilirsiniz. Kapsayıcıyı göreli ve içeriği mutlak yaparsanız, içerik kabın içinde serbestçe hareket edebilecektir. Bu nedenle top: 0;ve left: 0;içeriğinde kullanırsanız , kabın sol üst köşesine yerleştirilir.

Ardından, hizalamak için üst ve sol referansları% 50 olarak değiştirmeniz yeterlidir. Bu, içeriği konteynerin merkezinde içeriğin sol üst köşesinden konumlandıracaktır.

Bu yüzden içeriği boyutunun yarısını sola ve yukarıya çevirerek düzeltmeniz gerekir.

İşte vetik hizalamanın nasıl yapılacağı hakkında harika bir makale. Şamandıra şeklini seviyorum.

http://www.vanseodesign.com/css/vertical-centering/

HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

Ve ilgili stil:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}

HTML

<div id="myparent">
  <div id="mychild">Test Content here</div>
</div>

CSS

#myparent {
  display: table;
}
#mychild {
  display: table-cell;
  vertical-align: middle;
}

Üst div'i tablo olarak, alt div ise tablo hücresi olarak görüntülenecek şekilde ayarladık. Daha sonra child div üzerinde dikey hizalama kullanabilir ve değerini orta olarak ayarlayabiliriz. Bu alt div içindeki her şey dikey olarak ortalanacaktır.

Basit. Sadece display:table-cellana sınıfınıza ekleyin .

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

Bu jsfiddle göz atın !

İşte en basit çözüm - hiçbir şeyi değiştirmenize gerek yok, sadece ortalamak istediğiniz divin kabına üç satır CSS kuralı ekleyin. # Flex BoxLoveFlexBox'ı seviyorum

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}

<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Bonus

justify-contentdeğeri aşağıdaki birkaç seçenek olarak ayarlanabilir:

• flex-startalt div'ı, ana kabındaki esnek akışın başladığı yere hizalar. Bu durumda, üstte kalacaktır.

• centeralt div öğesini üst kabının merkezine hizalar. Bu gerçekten temiz, çünkü sarmalayıcıyı çocukları ortalamak için ana bir kaba koymak için tüm çocukların etrafına sarmak için ek bir div eklemenize gerek yok. Bu nedenle, bu gerçek de dikey merkezi ( column flex-direction. Benzer, değiştirmek eğer flow-directionüzere row, yatay merkezli hale gelecektir.

• flex-endalt div'ı, esnek akışının ana kabında bittiği yere hizalar. Bu durumda, aşağı doğru hareket eder.

• space-betweenakışın başından akışın sonuna kadar tüm çocukları yayacaktır. Demoda, yayıldıklarını göstermek için başka bir çocuk div ekledim.

• space-around, benzer space-between, ancak akışın başlangıcında ve sonunda alanın yarısı ile.

Yana vertical-alignbir beklendiği gibi eserleri td, tek hücreli koyabilirsiniz tableiçinde diviçeriğini hizalamak için.

<div>
    <table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
        Aligned content here...
    </td></tr></table>
</div>

Clunky, ama anlatabildiğim kadarıyla çalışıyor. Diğer geçici çözümlerin dezavantajları olmayabilir.

İçeriği% 100 yükseklikte bir tablonun içine koyun ve ana div için yüksekliği ayarlayın

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Bir yayılma alanını veya div öğesini başka bir div içinde dikey olarak ortalamak için, üst div öğesine göre konum ekleyin ve alt div öğesine mutlak konum ekleyin. Şimdi alt div, div içinde herhangi bir yere yerleştirilebilir.

<div class="parent">
    <div class="child">Vertically and horizontally centered child div</div>
</div>

css:

.parent{
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Bu modern bir yaklaşımdır ve CSS Flexbox işlevselliğini kullanır. Artık bu stilleri .mainkaba ekleyerek ana kapsayıcınızdaki içeriği dikey olarak hizalayabilirsiniz

.main {
        display: flex;
        flex-direction: column;
        justify-content: center;
}

Ve gitmekte fayda var!