Div sütunların içinde dikey hizalama orta

İçeriğini ortada dikey olarak hizalamak, biri görüntülü, diğeri metin içeren iki sütunlu bir satır kullanırken CSS ile mümkün mü?

Günlerce kafamı çarptım ve muhtemelen düşünebildiğim her şeyi denedim.

Tamamen yüzdelere dayanan kullandığım temel yapı bu. Bu, her biri en az% 100 olarak ayarlanmış bir dizi bölüme dayanan tek sayfalık bir düzen için geçerlidir.

CSS

HTML, body {
    width: 100%;
    height: 100%;
}

section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}

.row {
    width: 100%;
    height: 100%;
    display:table-cell;
}

.col-left, .col-right {
    float: left;
    width: 50%;
    height: 100%;
}

/*--this should be vertically centred--*/

.content {
}

HTML

<div class="row"> <div class="col-left"> <div class="content">

SOME TEXT

</div> </div> <div class="col-right"> <div class="content"> </div> </div> </div>
 

JSFiddle

1
katma yazar bpeterson76, kaynak

8 cevap

.row {
    ...
    display:table-row;
}
.col-left, .col-right {
    ...
    display: table-cell;
    vertical-align: middle;
}

Demo

11
katma
.row {
    ...
    display:table-row;
}
.col-left, .col-right {
    ...
    display: table-cell;
    vertical-align: middle;
}

Demo

11
katma

Display: table ve display: table-cell kullanarak yapısını ortaya koyduğunuz şekilde% 95'diniz, ancak gösterilmesi gerekenleri kaydırdınız: tablo hücresi ve tablo hücresini tablo olması gerektiğine göre ayarladınız kürek çekmek. Bunun yerine bunu kullanın:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}
.row {
    width: 100%;
    height: 100%;
    display:table-row;
}
.col-left, .col-right {
    display:table-cell;
    width: 50%;
    height: 100%;
    vertical-align:middle;
}
.col-left {
    background: MidnightBlue
}
.col-right {
    background: ForestGreen;
    text-align: center;
}
.content {
    border: 1px dashed red;
}
h1 {
    font-family: sans-serif;
    color: white;
}

<div class="row"> <div class="col-left"> <div class="content">

I should be vertically aligned in the middle...

And so should the image on the right...

</div> </div> <div class="col-right"> <div class="content"> </div> </div> </div>
 
</div> </div>

2
katma
Çok teşekkürler, bu konuda pek iyi değilim, ayrıca, bu tekniği sütunlar oluşturmak için hiç kullanmadım. Genellikle sadece bir miktar float kaldı. Biri diğerine göre daha kabul edilebilir mi yoksa tercih edilir mi? Sürümünüz vs David Rubin aşağıda. Hangisi en iyi? Yoksa kayıtsız mı?
katma yazar David Martins, kaynak

Display: table ve display: table-cell kullanarak yapısını ortaya koyduğunuz şekilde% 95'diniz, ancak gösterilmesi gerekenleri kaydırdınız: tablo hücresi ve tablo hücresini tablo olması gerektiğine göre ayarladınız kürek çekmek. Bunun yerine bunu kullanın:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}
.row {
    width: 100%;
    height: 100%;
    display:table-row;
}
.col-left, .col-right {
    display:table-cell;
    width: 50%;
    height: 100%;
    vertical-align:middle;
}
.col-left {
    background: MidnightBlue
}
.col-right {
    background: ForestGreen;
    text-align: center;
}
.content {
    border: 1px dashed red;
}
h1 {
    font-family: sans-serif;
    color: white;
}

<div class="row"> <div class="col-left"> <div class="content">

I should be vertically aligned in the middle...

And so should the image on the right...

</div> </div> <div class="col-right"> <div class="content"> </div> </div> </div>
 
</div> </div>

2
katma
Çok teşekkürler, bu konuda pek iyi değilim, ayrıca, bu tekniği sütunlar oluşturmak için hiç kullanmadım. Genellikle sadece bir miktar float kaldı. Biri diğerine göre daha kabul edilebilir mi yoksa tercih edilir mi? Sürümünüz vs David Rubin aşağıda. Hangisi en iyi? Yoksa kayıtsız mı?
katma yazar David Martins, kaynak

bunu deneyebilirsin:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}
.row {
    width: 100%;
    height: 100%;
    display:table;
}
.col-left, .col-right {
    float: left;
    display:table;
    vertical-align:middle;
    width: 50%;
    height: 100%;
}
.col-left {
    background: MidnightBlue
}
.col-right {
    background: ForestGreen;
    text-align: center;
}
.content {
    display:table-cell;
    vertical-align:middle;
    height:100%;
    border: 1px dashed red;
}
h1 {
    font-family: sans-serif;
    color: white;
}

<div class="row"> <div class="col-left"> <div class="content">

I should be vertically aligned in the middle...

And so should the image on the right...

</div> </div> <div class="col-right"> <div class="content"> </div> </div> </div>
 
</div> </div>

2
katma
Çok teşekkürler beyler. David, her iki teknik de iyi çalışıyor ve hiçbir tarayıcıda aralarındaki performans farkını söyleyemem. Birinin diğerine daha fazla tavsiye edilip edilmediğini merak ediyorum. @isherwood ile öneriniz vs David Rubin's; Hangisi tercih edilir?
katma yazar David Martins, kaynak
Daha fazla testten sonra "isherwood" ve "j08691" tarafından sağlanan çözümü daha anlaşılır, daha basit ve daha tutarlı buldum. Şamandıralardan kurtulmak da bana bir avantaj sağlıyor. Ayrıca ekstra bir kap gerektirmez. Önerilen alternatif ile, ekstra sabitleme gerektiren pencereyi küçültürken satır sonlarını fark ettim. Bana alternatif olsa ve karşılaştırma şansını verdiğin için teşekkürler. Emin değilim, bu sütun oluşturmak için tekrar kalan float kullanmam gerekmediği anlamına gelmez, ancak umarım yapar.
katma yazar David Martins, kaynak

bunu deneyebilirsin:

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}
.row {
    width: 100%;
    height: 100%;
    display:table;
}
.col-left, .col-right {
    float: left;
    display:table;
    vertical-align:middle;
    width: 50%;
    height: 100%;
}
.col-left {
    background: MidnightBlue
}
.col-right {
    background: ForestGreen;
    text-align: center;
}
.content {
    display:table-cell;
    vertical-align:middle;
    height:100%;
    border: 1px dashed red;
}
h1 {
    font-family: sans-serif;
    color: white;
}

<div class="row"> <div class="col-left"> <div class="content">

I should be vertically aligned in the middle...

And so should the image on the right...

</div> </div> <div class="col-right"> <div class="content"> </div> </div> </div>
 
</div> </div>

2
katma
Çok teşekkürler beyler. David, her iki teknik de iyi çalışıyor ve hiçbir tarayıcıda aralarındaki performans farkını söyleyemem. Birinin diğerine daha fazla tavsiye edilip edilmediğini merak ediyorum. @isherwood ile öneriniz vs David Rubin's; Hangisi tercih edilir?
katma yazar David Martins, kaynak
Daha fazla testten sonra "isherwood" ve "j08691" tarafından sağlanan çözümü daha anlaşılır, daha basit ve daha tutarlı buldum. Şamandıralardan kurtulmak da bana bir avantaj sağlıyor. Ayrıca ekstra bir kap gerektirmez. Önerilen alternatif ile, ekstra sabitleme gerektiren pencereyi küçültürken satır sonlarını fark ettim. Bana alternatif olsa ve karşılaştırma şansını verdiğin için teşekkürler. Emin değilim, bu sütun oluşturmak için tekrar kalan float kullanmam gerekmediği anlamına gelmez, ancak umarım yapar.
katma yazar David Martins, kaynak

Bu konuyla ilgilenen herkes için, bu sorun ve verilen cevaplar bende bu durumda hangi yöntemin uygulanacağı ve aslında genel olarak sütunlar oluşturmak için başka bir soru ortaya attı: Yüzer veya Görüntü mülk . Herhangi bir acemi veya benim gibi kendi kendini yetiştiren wannabe geliştiricisi için, araştırma ve testlerden sonra neyi sonuçlandırdığımı bilmek ilginç olabilir.

Kendimi sık sık, öğelerin Yüzdürülmesi etrafında dönen sütunlar oluşturmak için farklı yöntemler kullanarak, bir şekilde veya başka bir yolla, sonunda istediğim şeyi yapmamı gerektiren bir hackleme gerektiren her zaman bir miktar kesmeyi gerektirir. tutarsızlık ve güvenilmezlik.

Biri, yerleşim yapısı için çok hayati bir şeyin zaman içinde bazı açık, zarif ve basit bir çözüme sahip olacağını düşünürdü. Görünüşe göre var ve Tabloyu Göster . Bazı çok özel durumlarda sınırlamaları olabilir ama genel olarak tek ihtiyacınız olan şey. Çok sağlam ve onunla istediğin her şeyi yapabilirsin. Ne yazık ki, "masa" kelimesinin bir tür tabu olduğunu düşünüyorum. Ancak bu yöntem basit, anlaşılır, güvenilir ve beklendiği gibi davranmak için herhangi bir saldırı gerektirmez. Her zaman bir mücadele olan dikey hizalama da bu şekilde kolaylaştırılmıştır.

Bunun gibi basit bir yapı ihtiyacınız olan tek şey:

.container {
  display: table;
}
.row {
  display: table-row;
}
.col {
  display: table-cell;
}

Bazı nedenlerden dolayı (muhtemelen "kelime" tabiki iğrenç kelimesinden dolayı), temel CSS sütunlarında basit bir arama ile önerilen bu yöntemi bulamazsınız.

Konuyla ilgili bu makalelerin ilginç olduğunu düşündüm:

CSS Düzenlerinde Flick'i Float Edin

Elveda Yüzen: CSS Düzeninin Geleceği

1
katma

Bu konuyla ilgilenen herkes için, bu sorun ve verilen cevaplar bende bu durumda hangi yöntemin uygulanacağı ve aslında genel olarak sütunlar oluşturmak için başka bir soru ortaya attı: Yüzer veya Görüntü mülk . Herhangi bir acemi veya benim gibi kendi kendini yetiştiren wannabe geliştiricisi için, araştırma ve testlerden sonra neyi sonuçlandırdığımı bilmek ilginç olabilir.

Kendimi sık sık, öğelerin Yüzdürülmesi etrafında dönen sütunlar oluşturmak için farklı yöntemler kullanarak, bir şekilde veya başka bir yolla, sonunda istediğim şeyi yapmamı gerektiren bir hackleme gerektiren her zaman bir miktar kesmeyi gerektirir. tutarsızlık ve güvenilmezlik.

Biri, yerleşim yapısı için çok hayati bir şeyin zaman içinde bazı açık, zarif ve basit bir çözüme sahip olacağını düşünürdü. Görünüşe göre var ve Tabloyu Göster . Bazı çok özel durumlarda sınırlamaları olabilir ama genel olarak tek ihtiyacınız olan şey. Çok sağlam ve onunla istediğin her şeyi yapabilirsin. Ne yazık ki, "masa" kelimesinin bir tür tabu olduğunu düşünüyorum. Ancak bu yöntem basit, anlaşılır, güvenilir ve beklendiği gibi davranmak için herhangi bir saldırı gerektirmez. Her zaman bir mücadele olan dikey hizalama da bu şekilde kolaylaştırılmıştır.

Bunun gibi basit bir yapı ihtiyacınız olan tek şey:

.container {
  display: table;
}
.row {
  display: table-row;
}
.col {
  display: table-cell;
}

Bazı nedenlerden dolayı (muhtemelen "kelime" tabiki iğrenç kelimesinden dolayı), temel CSS sütunlarında basit bir arama ile önerilen bu yöntemi bulamazsınız.

Konuyla ilgili bu makalelerin ilginç olduğunu düşündüm:

CSS Düzenlerinde Flick'i Float Edin

Elveda Yüzen: CSS Düzeninin Geleceği

1
katma