How to align a flex item when it's very long - html

Question

I'm creating a very simple responsive image gallery, with the least amount of css posible.
I've came up with the following
<div class="container">
<ul class="thumbnail">
<li>
<div>
<img class="fluid" src="" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>name goes here</p>
<p>subname goes here</p>
<p>year</p>
<img src="" width="20" height="15" alt="">
</div>
</li>
...
</ul>
</div>
CSS:
.thumbnail {
display: flex;
flex-wrap: wrap;
margin: -20px 0 0 -20px;
}
.thumbnail li {
margin: 20px 0 0 20px;
}
.thumbnail img {
display: block; /* remove bottom gap */
}
.thumb-caption {
display: flex;
flex-direction: column;
align-items: center;
}
.thumb-caption > * {
margin-top: 10px;
}
... and the result
https://jsfiddle.net/51yrdk11/
I want to center everything inside the class thumb-caption. It could be a <p> or img tag.
For some reason, when one of the <p> in the thumb-caption class is very long, it does not center correctly.
Can anybody tell me why and to fix it?
EDIT
I know that by using text-align:center an the <p> tags, it aligns correctly. But, why? Why some are align and the long ones are not align? I need to understand the logic.

Answer 1

The align-items is used to align the flex-items. It will not align the inner content of the flex-items.
You have to use text-align: center in the .thumb-caption class
Stack Snippet
/*----- reset -----*/
* {
box-sizing: border-box;
}
p,
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
/* end - reset */
.container {
max-width: 800px;
margin: auto;
background-color: pink;
}
.thumbnail {
display: flex;
flex-wrap: wrap;
margin: -20px 0 0 -20px;
}
.thumbnail li {
margin: 20px 0 0 20px;
}
.thumbnail img {
display: block;
/* remove bottom gap */
}
.thumb-caption {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.thumb-caption>* {
margin-top: 10px;
}
/* media queries */
.thumbnail li {
flex-basis: calc((100% / 3) - 20px);
}
/* end- media queries */
.fluid {
max-width: 100%;
height: auto;
}
<div class="container">
<ul class="thumbnail">
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname is very very long, and when it is very long, for some reason, it does not center correctly, why?
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
</ul>
</div>
Updated Fiddle

Answer 2

The reason the smaller text is centered and the long is not, is because it is the p element that gets centered, not its content.
What the align-items: center does is making the p shrink to its content, in opposite to its default, stretch, which makes it fill its parent's width, hence when content is too wide it can't center the p anymore, as it takes full width.
As you already know, text-align: center targeting the p element will fix this.
As a note, one of the simplest things one can do, to understand these kind of logics, is to add a border or background color on the element that seems to behave odd, in this case on the p, and one will most of the time see what's going on.
/*----- reset -----*/
* {
box-sizing: border-box;
}
p,
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
/* end - reset */
.container {
max-width: 800px;
margin: auto;
background-color: pink;
}
.thumbnail {
display: flex;
flex-wrap: wrap;
margin: -20px 0 0 -20px;
}
.thumbnail li {
margin: 20px 0 0 20px;
}
.thumbnail img {
display: block; /* remove bottom gap */
}
.thumb-caption {
display: flex;
flex-direction: column;
align-items: center;
}
/* for this demo */
.thumb-caption p {
border: 1px dashed black;
}
.thumb-caption > * {
margin-top: 10px;
}
/* media queries */
.thumbnail li {
flex-basis: calc((100% / 3) - 20px);
}
/* end- media queries */
.fluid {
max-width: 100%;
height: auto;
}
<div class="container">
<ul class="thumbnail">
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname is very very long, and when it is very long, for some reason, it does not center correctly, why?
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
<li>
<div>
<img class="fluid" src="http://via.placeholder.com/400x400" width="" height="" alt="">
</div>
<div class="thumb-caption">
<p>
name goes here
</p>
<p>
subname goes here
</p>
<p>
year
</p>
<img src="http://via.placeholder.com/20x15" width="20" height="15" alt="">
</div>
</li>
</ul>
</div>