如何將Flexbox盒子左邊的子文字居中？

在這個例子中，你會如何將子文本居中在父盒子的左邊緣？如何將Flexbox盒子左邊的子文字居中？

目標是在前一個框中看到一半文本，而在自己的框中看到一半文本，而與文本長度無關。

.boxesContainer { 
 
    display: flex; 
 
} 
 
.text{ 
 
/* This needs to be 50% of the text width, not the box. */ 
 
/* transform: translateX(-50%); */ 
 
} 
 
.box1 { 
 
    background: #D9E4AA; 
 
    flex-basis: 30%; 
 
    z-index:1; 
 
} 
 
.box2 { 
 
    background: #B8D2EC; 
 
    flex-basis: 10%; 
 
    z-index:2; 
 
} 
 
.box3 { 
 
    background: #F3D1B0; 
 
    flex-basis: 20%; 
 
    z-index:3; 
 
} 
 
.box4 { 
 
    background: #D5B2D4; 
 
    flex-basis: 10%; 
 
    z-index:4; 
 
} 
 
.box5 { 
 
    background: #F2AFAD; 
 
    flex-basis: 40%; 
 
    z-index:5; 
 
}

<div class="boxesContainer"> 
 
    <div class="box1"> 
 
    <div class="text"> 
 
     1---1 
 
    </div> 
 
    </div> 
 

 
    <div class="box2"> 
 
    <div class="text"> 
 
     2-----2 
 
    </div> 
 
    </div> 
 

 
    <div class="box3"> 
 
    <div class="text"> 
 
     3-------3 
 
    </div> 
 
    </div> 
 

 
    <div class="box4"> 
 
    <div class="text"> 
 
     4---------4 
 
    </div> 
 
    </div> 
 

 
    <div class="box5"> 
 
    <div class="text"> 
 
     5-----------5 
 
    </div> 
 
    </div> 
 

 
    <div class="box the-rest" /> 
 

 
</div>

來源

2017-07-14 GollyJer

看看評論我張貼在這裏有一些有用的鏈接：HTTPS：/ /stackoverflow.com/questions/45104834/css3-flexbox-limit-4-items-per-row-auto-width#comment77181218_45104834 – JGFMK

使用絕對定位每個文本項目。使用position: relative（detailed explanation）將每個單獨的盒子（彈性項目）作爲包含塊。

您將需要爲容器添加高度，因爲設置高度的文本將從文檔流中移除。

.boxesContainer { 
 
    display: flex; 
 
    height: 20px; 
 
} 
 

 
.boxesContainer> div { 
 
    position: relative; 
 
} 
 

 
.boxesContainer > div > .text { 
 
    position: absolute; 
 
    transform: translateX(-50%); 
 
} 
 

 
.box1 { 
 
    background: #D9E4AA; 
 
    flex-basis: 30%; 
 
    z-index: 1; 
 
} 
 

 
.box2 { 
 
    background: #B8D2EC; 
 
    flex-basis: 10%; 
 
    z-index: 2; 
 
} 
 

 
.box3 { 
 
    background: #F3D1B0; 
 
    flex-basis: 20%; 
 
    z-index: 3; 
 
} 
 

 
.box4 { 
 
    background: #D5B2D4; 
 
    flex-basis: 10%; 
 
    z-index: 4; 
 
} 
 

 
.box5 { 
 
    background: #F2AFAD; 
 
    flex-basis: 40%; 
 
    z-index: 5; 
 
}

<div class="boxesContainer"> 
 
    <div class="box1"> 
 
    <div class="text"> 
 
     1---1 
 
    </div> 
 
    </div> 
 

 
    <div class="box2"> 
 
    <div class="text"> 
 
     2-----2 
 
    </div> 
 
    </div> 
 

 
    <div class="box3"> 
 
    <div class="text"> 
 
     3-------3 
 
    </div> 
 
    </div> 
 

 
    <div class="box4"> 
 
    <div class="text"> 
 
     4---------4 
 
    </div> 
 
    </div> 
 

 
    <div class="box5"> 
 
    <div class="text"> 
 
     5-----------5 
 
    </div> 
 
    </div> 
 

 
    <div class="box the-rest" /> 
 

 
</div>

來源

2017-07-14 16:09:53

謝謝邁克爾。偉大的作品，但vals得到簡單的檢查。 – GollyJer

是的。如果它能完成你所需要的工作，這是一個更簡單的解決方案。我偏離了「內聯塊」，因此我不必處理基線對齊問題，這可能會將文本提升到較大容器垂直中心的上方。 –

是的，這是有道理的。它肯定會成爲工具箱的有用工具。再次感謝您的幫助！ – GollyJer

設置文本項目inline-block的

.boxesContainer { 
 
    display: flex; 
 
} 
 
.text{ 
 
    display: inline-block; 
 
    transform: translateX(-50%); 
 
} 
 
.box1 { 
 
    background: #D9E4AA; 
 
    flex-basis: 30%; 
 
    z-index:1; 
 
} 
 
.box2 { 
 
    background: #B8D2EC; 
 
    flex-basis: 10%; 
 
    z-index:2; 
 
} 
 
.box3 { 
 
    background: #F3D1B0; 
 
    flex-basis: 20%; 
 
    z-index:3; 
 
} 
 
.box4 { 
 
    background: #D5B2D4; 
 
    flex-basis: 10%; 
 
    z-index:4; 
 
} 
 
.box5 { 
 
    background: #F2AFAD; 
 
    flex-basis: 40%; 
 
    z-index:5; 
 
}

<div class="boxesContainer"> 
 
    <div class="box1"> 
 
    <div class="text"> 
 
     1---1 
 
    </div> 
 
    </div> 
 

 
    <div class="box2"> 
 
    <div class="text"> 
 
     2-----2 
 
    </div> 
 
    </div> 
 

 
    <div class="box3"> 
 
    <div class="text"> 
 
     3-------3 
 
    </div> 
 
    </div> 
 

 
    <div class="box4"> 
 
    <div class="text"> 
 
     4---------4 
 
    </div> 
 
    </div> 
 

 
    <div class="box5"> 
 
    <div class="text"> 
 
     5-----------5 
 
    </div> 
 
    </div> 
 

 
    <div class="box the-rest" /> 
 

 
</div>

來源

2017-07-14 16:12:12 vals

美麗。簡單。謝謝！ – GollyJer

如何將Flexbox盒子左邊的子文字居中？

回答

相關問題