Nasıl dikey bir div içinde değişken yükseklik ile içerik merkezi?

SORU

12 EYLÜL 2008, Cuma

Nasıl dikey bir div içinde değişken yükseklik ile içerik merkezi?

Ne dikey içeriğinin yüksekliği değişken bir div içeriğini center için en iyi yoldur. Özellikle benim durumumda, kapsayıcı div yüksekliği sabit, ama eğer kap da değişken yüksekliğe sahip olduğu durumlarda işe yarayacak bir çözüm olsaydı harika olurdu. Ayrıca, hayır, ya da CSS kesmek ve/çok az kullanma ile ilgili bir çözüm istiyorum ya da non-semantik biçimlendirme.

alt text

CEVAP

25 EKİM 2012, PERŞEMBE

Bu sorun için bulduğum en iyi çözüm gibi görünüyor, tarayıcınız :before pseudo eleman desteklediği sürece: CSS-Tricks: Centering in the Unknown.

Herhangi bir ekstra biçimlendirme gerektirmez ve son derece iyi iş gibi görünüyor. table elementler max-height özelliği itaat etmeyin çünkü display: table yöntemi kullanamadım.

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said—"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Bunu Paylaş: