显示柔性盒居中但左对齐项左左对齐

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的解决方案与一个额外的包装可能更实际（除非容器的左对齐是可接受的优雅降级）。