yüzde olarak çalışmayan satır yüksekliği

Hat yüksekliğiyle ilgili olarak kafamı tam olarak anlayamadığım bir sorun yaşıyorum.

Aşağıdaki kod bir görüntüyü bir div içinde ortalayacaktır:

CSS

.bar {
    height: 800px;
    width: 100%;
    line-height:800px;
    background-color: #000;
    text-align: center; 
}

.bar img {
    vertical-align: middle;   
}

HTML

<div class="bar">
    <img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

Bununla birlikte, satır yüksekliğini% 100 olarak değiştirirsem, satır yüksekliği etkili olmaz (veya en azından div'in% 100'ü olmaz).

Örnek jsfiddle

Neyi yanlış yaptığımı bilen var mı?

line-height: 100%yüksekliğinin% 100'ü değil, o öğe için yazı tipi boyutunun% 100'ü anlamına gelir. Değeri mutlak uzunluk birimi (kullandığı sürece Aslında, satır yüksekliği, her yazı tipi boyutu değil, yüksekliği göreceli px, ptvs.).

Bu sorunun eski olduğunu biliyorum ama benim için mükemmel bir çözüm buldum.

Bu css'yi ortalamak istediğim div'e ekliyorum:

div:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

Bu her seferinde işe yarar ve temizdir.

Düzenleme: Sadece tamamlama aşkına, scss kullanıyorum ve dikey olarak ortalamak istediğim, doğrudan çocuk sahibi olan her ebeveyne dahil ettiğim kullanışlı bir karışımım var:

@mixin vertical-align($align: middle) {
  &:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: $align;
    // you can add font-size 0 here and restore in the children to prevent
    // the inline-block white-space to mess the width of your elements
    font-size: 0;
  }
  & > * {
    vertical-align: $align;
    // although you need to know the font-size, because "inherit" is 0
    font-size: 14px;
  }
}

Tam açıklama: div:beforediv'in içine, ancak alt öğelerinin herhangi birinin önüne bir öğe ekler. Kullanırken :beforeveya :afterbir content:beyan kullanmalıyız, aksi takdirde hiçbir şey olmaz, ancak amacımız için içerik boş olabilir. Daha sonra, ebeveyninin yüksekliği tanımlandığı ve bu eleman en azından inline-blok olduğu sürece, elemana, ebeveyninin boyu kadar uzun olmasını söyleriz. farklı şekilde işlediğinin vertical-alignaksine, ebeveynle ilgili kendinin dikey konumunu tanımlar text-align.

@mixinDeklarasyon küstahlık kullanıcıları içindir ve bu gibi kullanılabilir olacaktır:

div {
    @include vertical-align(middle)
}

Yüzdeyi satır yüksekliği olarak kullandığınızda, bu div kapsayıcısına değil, yazı tipi boyutuna bağlıdır.

line-height:% 100, konteynere göre hesaplansaydı, elemanları dikey olarak ortalamanın kolay bir yolu olurdu, ancak bu çok kolay olurdu, bu yüzden işe yaramaz.

Yani bunun yerine, satır yüksekliği demenin başka bir yolu: 1em (değil mi?)

Bir öğeyi dikey olarak ortalamanın başka bir yolu şudur:

.container {
     position:relative;
}
.center {
     position:absolute;
     top:0; left:0; bottom:0; right:0;
     margin: auto;
     /* for horiz left-align, try "margin: auto auto auto 0" */
}

güzel olmayabilir, ama işe yarıyor ve anlamsal;

<div class="bar" style="display: table; text-align: center;">
    <img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>

display: table-cell, bir elemana dikey hizalama için benzersiz bir tablo yeteneği verir (en azından bence benzersizdir)

Bu çok geç bir cevaptır, ancak modern tarayıcılarda, ana öğenin ekran yüksekliğinin% 100'ü olduğunu varsayarsak, vhgörüntü alanı birimini kullanabilirsiniz . VAKTİNİ BOŞA HARCAMAK

line-height: 100vh;

Tarayıcı desteği

Bu çözüm IE9 ve üzeri sürümlerde çalışır. Önce çocuğun üst konumunu% 50'ye (ebeveynin ortası) ayarladık. Ardından translatekuralı kullanarak çocuğu gerçek boyunun yarısı kadar yukarı kaydırın. Ana faydası, çocuğun boyunu tanımlamamız gerekmemesi, tarayıcı tarafından dinamik olarak hesaplanmasıdır. JSFiddle

.bar {
    height: 500px;
    text-align: center;
    background: green;
}
.bar img {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

Daha modern bir yaklaşım bunun için flexbox kullanmaktır, daha basit ve daha temizdir. Ancak FlexBox ne tamamen farklı bir paradigma olduğunu inline-block, floatya daposition olmaya kullanılan.

İçinizdeki öğeleri hizalamak için .parentşunları yapın:

.parent {
  display: flex;
  align-items: center;
}

Bu onunla ilgili. Çocuklarıflex ebeveynleri otomatik esnek alt öğelerden dönüştürülür.

Flexbox hakkında daha fazla bilgi almalısınız, başlamak için iyi bir yer şu hile sayfasıdır: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Satır yüksekliğini bu öğe yüksekliğine göre ayarlayabilirsiniz . Öğe yüksekliği 200px, metni ortalamak için satır yüksekliğini 200px olarak ayarlamanız gerektiği anlamına gelir.

span {
  height: 200px;
  width: 200px; 
  border: 1px solid black;
  line-height: 200px; 
  display: block;
}

<span>Im vertically center</span>

Bu, aşağıdaki CSS'yi kapsayıcı div veya dış div'de ayarlamanız gereken modern çözümdür.

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

Dikey olarak ortalamak istediğiniz elemana aşağıdaki başka bir çözüm uygulanabilir. Dış veya kapsayıcı div'in

.inner-div {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

Dış veya kapsayıcı div konumunun göreli olması gerektiğini unutmayın.