Satırlarımı% 100 genişliğine nasıl alabilirim?

Question

Bazı satırları hizalayan birkaç sorun yaşıyorum. Görünümün% 100 yüksekliğini kaplayan bir bölüm görüntülüyorum. Bu bölümü ekranınızda görüntülediğinizde, yalnızca bu bölümü göreceksiniz.

Bu bölümde, bir başlığım ve altyazım var. Başlık, bölümün üst kısmına yakın bir yerde gösterilmeli, ancak alt bölüm, bölümün ortasında dikey olarak görüntülenmelidir. Eğer ekranınız 1000px yüksek ise (bu bölüm 1000 piksel yükseklikte olacak) altyazının 500 piksel noktasında görüntülenebilmesi gerekir. Benim satırlar artık 100 olan My bölümünün şu anda

<section class="block-hero"> 
    <div class="container container-table"> 
    <div class="row vertical-top-row"> 
     <div class="col-md-12 centerText"> 
     <h1 class="heroTitle">Some Title</h1> 
     </div> 
    </div> 
    <div class="row vertical-center-row"> 
     <div class="col-md-12 centerText"> 
     <h2 id="subTitle">Some<br>Text</h2> 
     </div> 
    </div> 
    </div> 
</section> 

benziyor Ve CSS ben şimdi yaşıyorum bir fiddle Bir sorunu Şu anda o var nasıl olduğunu zorunda

html, body { 
    height:100%; 
} 
.site-wrapper { 
    overflow: hidden; 
    position: relative; 
    top: 0; 
    width: 100%; 
} 

.block-hero { 
    height:100%; 
    width: 100%; 
    z-index: 300; 
    overflow:hidden; 
} 

.container-table { 
    display: table; 
    width:100%; 
    height:100%; 
} 
.vertical-top-row { 
    display: table-cell; 
    vertical-align: top; 
} 
.vertical-center-row { 
    display: table-cell; 
    vertical-align: middle; 
    height:100%; 
} 

.centerText { 
    text-align: center; 
} 

#subTitle { 
    width: 100%; 
} 

gibidir % Genişlik. Bu, altyazının tam olarak ortada ortalanmadığı anlamına gelir. Sanırım dikey hizalama çalışmasına sahibim, ama şimdi metni ortada ortalamam gerekiyor.

Bunu yapmak için nasıl giderim veya şu anda sahip olduğum değişiklikler için değişiklik yapmam gerekir mi?

Teşekkür

Answer 1

Eğer biraz jsfiddle ile uğraşırken sonra seni atıyor şey Bootstrap adlı satırlar ve sütunlar ile birlikte display: table kullanmanızın gibi görünüyor. Önyükleme masaları bu şekilde masalarla çalışmaz, değiştirilmeleri için yapılır, bu yüzden masa ile kontrol etmek için mücadele eder.

ana şey sizin satırlar yerine başka aşağıda olandan yanyana biten gözükmektesiniz olduğunu ve çevrelerindeki herhangi display: table-row elemanları olmadan satırlarda display: table-cell olduğu için bundan, yani tarayıcı hareket gibi görünüyor Her ikisi de etrafında bir table-row elemanı varmış gibi, böylece birbirlerinin yanına yatmaya zorlanıyorlar, çünkü şimdi aynı satırda iki hücre var.

En iyi seçiminiz, IMO, bir ızgara yöntemini veya diğerini, Önyükleme ya da tablo hücrelerini seçmektir. Şahsen Bootstrap'ı tercih ederim, ama bu sizin aramanız. Tablo yoluna gitmek istiyorsanız, .row ve .col-sm-12 sınıflarını kaldırın, eski .row öğelerinizi display: table-row öğelerine ayarlayın ve eski .col-sm-12 öğelerinizi display: table-cell olarak ayarlayın.

Önyükleme yoluna gitmek istiyorsanız (tercihim), seçenekleriniz vardır. Bu bölümdeki iki başlığın yanı sıra başka bir içeriğinizin olup olmadığını gerçekten belirlemediniz, ancak eğer değilse, altyazınızı dikey olarak hizalamanın kolay bir yolu,'un margin-top: 40% gibi bir şeyi göreceli bir mesafeye itmesidir. üstündeki satırdan. Yüzde ile oyna ve ne sevdiğini gör. Bu bölümde, orijinal jsfiddle dayalı bir örnek: bölüm görüntü alanı yüksekliğinin% 100 olması için tercih davranış gerçekten eğer arada https://jsfiddle.net/ck3epwm5/1/

, sen height: 100vh ile height: 100% değiştirmek isteyebilirsiniz. Bu, kelimenin tam anlamıyla "viewport yüksekliğinin yüzdesi" anlamına gelen yeni (ish) CSS3 uzunluk birimidir (teknik olarak 1vh, "viewport yüksekliğinin 1/100'ü kadar", MDN reference) ve bu nedenle doğrudan görünümün kendisidir. % değerleri, bazen beklenmedik davranışlara neden olabilecek belirli bir yüksekliğe sahip en yakın ataya dayanır.