顯示柔性盒居中但左對齊項左左對齊

Question

我試圖設置這些div以顯示在中心但保持其項目顯示爲左，如text-align: left會做。

這裏是我的例子：https://jsfiddle.net/gr5Lmos1/

#donateList { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-self: center; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
} 
 

 
.donateItem { 
 
    flex: 0 1 auto; 
 
    align-items: flex-start; 
 
    justify-content: flex-start; 
 
    align-self: center; 
 
} 
 

 
.donateItem * { 
 
    display: inline-block; 
 
} 
 

 
.donateItem p { 
 
    vertical-align: bottom; 
 
} 
 

 
.donateItem img { 
 
    height: 64px; 
 
    width: 64px; 
 
}

<div id="donateList"> 
 
    <div class="donateItem"> 
 
    <img src="/images/icons/bitcoin.png"> 
 
    <p>Bitcoin:</p> 
 
    <p>fkewjhf;eiwhf;iewfhwehfewifhew</p> 
 
    </div> 
 
    <div class="donateItem"> 
 
    <img src="/images/icons/paypal.png"> 
 
    <p>Paypal:</p> 
 
    <p>eijfhewfwifhefefewf</p> 
 
    </div> 
 
</div>

我試圖讓donateItem的內容，以左都顯示，但保持donateItem的所有div中心，因爲他們現在的樣子。

Answer 1

如果你是開放的包括另一包裝在您的標記，很容易：

1. 使用align-items: flex-start（或讓它採取默認stretch值）爲#donateList

2. 中心垂直和水平對齊新的包裝div。

觀看演示下方（也去掉了一些冗餘樣式）：

main { /* ADDED */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
#donateList { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: flex-start; /* CHANGED */ 
 
    /*align-self: center;*/ 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
} 
 

 
.donateItem { 
 
    flex: 0 1 auto; 
 
    /*align-items: flex-start; 
 
    justify-content: flex-start; 
 
    align-self: center;*/ 
 
} 
 

 
.donateItem * { 
 
    display: inline-block; 
 
} 
 

 
.donateItem p { 
 
    vertical-align: bottom; 
 
} 
 

 
.donateItem img{ 
 
    height: 64px; 
 
    width: 64px; 
 
}

<main> 
 
    <div id="donateList"> 
 
    <div class="donateItem"> 
 
     <img src="http://placehold.it/100x100"> 
 
     <p>Bitcoin:</p> 
 
     <p>fkewjhf;eiwhf;iewfhwehfewifhew</p> 
 
    </div> 
 
    <div class="donateItem"> 
 
     <img src="http://placehold.it/100x100"> 
 
     <p>Paypal:</p> 
 
     <p>eijfhewfwifhefefewf</p> 
 
    </div> 
 
    </div> 
 
</main>

Answer 2

你本是要只是這樣做：

#donateList 
{ 
    margin: 0px auto; 
    width: 50%; 
    padding: 20px; 
} 

而且添加display:flex;在.donateItem和.donateItem p＃

#donateList 
 

 
{ 
 
    margin: 0px auto; 
 
    width: 50%; 
 
    padding: 20px; 
 
    
 
} 
 

 
.donateItem 
 
{ 
 
    flex: 0 1 auto; 
 
    align-items: flex-start; 
 
    justify-content: flex-start; 
 
    align-self: center; 
 
    display:flex; 
 
} 
 

 
.donateItem p 
 
{ 
 
    vertical-align: bottom; 
 
display:flex; 
 
} 
 

 

 
.donateItem * 
 
{ 
 
    display: inline-block; 
 
} 
 

 
.donateItem img 
 
{ 
 
    height: 64px; 
 
    width: 64px; 
 
}

<div id="donateList"> 
 

 
<div class="donateItem"> 
 

 
    <img src="http://icons.iconarchive.com/icons/froyoshark/enkel/96/Bitcoin-icon.png"> 
 

 
    <p>Bitcoin:</p> 
 

 
    <p>fkewjhf;eiwhf;iewfhwehfewifhew</p> 
 

 
</div> 
 

 
<div class="donateItem"> 
 

 
    <img src="http://axisj.com/assets/images/donate-how-paypal.png"> 
 

 
    <p>Paypal:</p> 
 

 
    <p>eijfhewfwifhefefewf</p> 
 

 
</div>

Answer 3

這裏有一個解決方案，但它是一個有點哈克和容器的寬度需要調整的具體情況。容器獲取這些設置以便在機體內部對中：

width: 50%; 
margin: 0 auto; 
overflow: visible; 
white-space: nowrap; 

...和Flex項目獲得align-self: flex-start;的容器內左對齊：

#donateList { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-self: center; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    overflow: visible; 
 
    white-space: nowrap; 
 
} 
 

 
.donateItem { 
 
    flex: 0 1 auto; 
 
    align-items: flex-start; 
 
    justify-content: flex-start; 
 
    align-self: flex-start; 
 
} 
 

 
.donateItem * { 
 
    display: inline-block; 
 
} 
 

 
.donateItem p { 
 
    vertical-align: bottom; 
 
} 
 

 
.donateItem img { 
 
    height: 64px; 
 
    width: 64px; 
 
}

<div id="donateList"> 
 
    <div class="donateItem"> 
 
    <img src="/images/icons/bitcoin.png"> 
 
    <p>Bitcoin:</p> 
 
    <p>fkewjhf;eiwhf;iewfhwehfewifhew</p> 
 
    </div> 
 
    <div class="donateItem"> 
 
    <img src="/images/icons/paypal.png"> 
 
    <p>Paypal:</p> 
 
    <p>eijfhewfwifhefefewf</p> 
 
    </div> 
 
</div>

Answer 4

對於現代的瀏覽器，改變項目定位於flex-start，使容器一樣寬，最長的項目通過width: max-content使它可以與通常margin:auto居中：

#donateList { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: flex-start; 
 
    flex-direction: column; 
 
    width: max-content; 
 
    margin: auto; 
 
} 
 

 
.donateItem { 
 
    flex: 0 1 auto; 
 
    align-items: flex-start; 
 
    justify-content: flex-start; 
 
} 
 

 
.donateItem * { 
 
    display: inline-block; 
 
} 
 

 
.donateItem p { 
 
    vertical-align: bottom; 
 
} 
 

 
.donateItem img { 
 
    height: 64px; 
 
    width: 64px; 
 
}

<div id="donateList"> 
 
    <div class="donateItem"> 
 
    <img src="/images/icons/bitcoin.png"> 
 
    <p>Bitcoin:</p> 
 
    <p>fkewjhf;eiwhf;iewfhwehfewifhew</p> 
 
    </div> 
 
    <div class="donateItem"> 
 
    <img src="/images/icons/paypal.png"> 
 
    <p>Paypal:</p> 
 
    <p>eijfhewfwifhefefewf</p> 
 
    </div> 
 
</div>

不幸的是，max-content的瀏覽器支持是far from ideal，所以@ kukkuz的解決方案與一個額外的包裝可能更實際（除非容器的左對齊是可接受的優雅降級）。