Esnek Kutu: Alt ve orta arasında hizala?

Question

Birisi bu düzeni nasıl oluşturacağını biliyor mu, flexbox?

metin merkezine yerleştirilir olacak ve düğme metni ve alt arasına yerleştirilmek için gidiyor.

.aligner { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100%; 
 
}

<div class="aligner"> 
 
    <h3>SUPERMAN</h3> 
 
    <p>FTW</p> 
 
    <button>BUTTON</button> 
 
</div>

Bu merkezde her şeyi hizalar fakat sadece metin merkezinde olmak istiyorum ve merkezi ve alt kısımları arasındaki düğmesi:

Şimdi bu var.

Answer 1

Bu düzen deneyebilirsiniz

: flex: 1

başlık ve alt başlık (başlıkları) ile

• Anonim elemanı flex: 1 ve display: flex ile
• Eleman.

Başlığın altındaki ve altındaki öğeler, eşit miktarlarda başlıklar tarafından bırakılan kullanılabilir alanı alacaktır. Böylece başlıklar ortalanacak.

Bu öğeler esnek kaplar da olabilir ve içeriklerini içeriklerini istediğiniz gibi hizalayabilirsiniz.

html, body {height: 100% } * { margin: 0; } 
 
.aligner, .below { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.aligner { 
 
    height: 100%; 
 
} 
 
.aligner::before { content: ''; } 
 
.aligner::before, .below { 
 
    flex: 1; 
 
}

<div class="aligner"> 
 
    <h3>SUPERMAN</h3> 
 
    <p>FTW</p> 
 
    <div class="below"> 
 
    <button>BUTTON</button> 
 
    </div> 
 
</div>

Answer 2

Metin ortasına yerleştirilecek ve düğme metin ve alt arasına yerleştirilmek üzere gidiyor.

Sen düzenini sağlamak için görünmez bir esnek öğe ile auto margins bir arada kullanabilirsiniz

:

(Düzenleme:. Ben soru örnek kod ile güncellendi önce bu cevabı yazdım Yani benim kod içinde farklıdır sorusu. Fakat yöntemi hala geçerlidir.)

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.container > div:nth-child(1) { margin-top: auto; visibility: hidden; } 
 
.container > div:nth-child(2) { margin-top: auto; } 
 
.container > div:nth-child(3) { margin-top: auto; margin-bottom: auto; } 
 

 
/* non-essential decorative styles */ 
 
.container { 
 
    background-color: yellow; 
 
} 
 
.box { 
 
    height: 50px; 
 
    width: 150px; 
 
    background-color: lightgreen; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    font-size: 1.2em; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="box">BUTTON</div><!-- invisible flex item --> 
 
    <div class="box">SUPERMAN</div> 
 
    <div class="box">BUTTON</div> 
 
</div>

jsFiddleAyrıca

---

, iki küçük ayarlamalarla birlikte alt öğe kenarı ile aynı hizada olabilir.

.container > div:nth-child(1) { visibility: hidden; } 
/* .container > div:nth-child(2) { margin-top: auto; } */ 
/* .container > div:nth-child(3) { margin-top: auto; } */ 

.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background-color: yellow; 
    height: 100%; 
    box-sizing: border-box; 
    justify-content: space-between; /* NEW */ 
} 

jsFiddle

daha hizalama seçenekleri için

---

bkz:

.container > div:nth-child(1) { /* margin-top: auto; */ visibility: hidden; } 
.container > div:nth-child(2) { margin-top: auto; } 
.container > div:nth-child(3) { margin-top: auto; /* margin-bottom: auto; */ } 

jsFiddle

YA, sadece justify-content: space-between kullanmak Methods for Aligning Flex Items