Displaying flexbox centered but align items left like text align left

Question

I am trying to setup these divs to display in the centre but keep their items displayed left, like text-align: left would do.

Here's my example: 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> 

I am trying to get the donateItem's contents to all display left but keep all the donateItem's divs centre as they are now.

Answer 1

If you are open to include another wrapper in your markup, it is easy:

1. Use align-items: flex-start (or let it take the default stretch value) for the #donateList

2. Center align vertically and horizontally the new wrapper div.

See demo below (also removed some redundant styles):

 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

You Have To Just Do This:

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

And Add display:flex; in .donateItem and .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

Here's a solution, but it's a bit hacky and the container width needs to be adjusted to the particular situation. The container gets these settings for centering inside the body:

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

...and the flex items get align-self: flex-start; for left-alignment inside the container:

 #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

For modern browsers, changing items alignment to flex-start and making the container as wide as the longest item via width: max-content makes it possible to center it with usual 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> 

Unfortunately, the browser support of max-content is far from ideal , so @kukkuz's solution with an extra wrapper is probably more practical (unless left alignment of the container is the acceptable graceful degradation for you).