Попытка выровнять текст под изображением с помощью flexbox

Question

Я пытаюсь выровнять тег p под изображением. Должно быть просто, но я немного перепутал это с этим и не должен что-то видеть. Вот мой код:

.project { 
 
    display: flex; 
 
    justify-content: center; 
 
    vertical-align: top; 
 
    text-align: center; 
 
} 
 
.project1 { 
 
    height: 10rem; 
 
    width: auto; 
 
    border: 5px solid rgba(52, 73, 94, 1); 
 
} 
 
.project1info { 
 
    background: rgba(52, 73, 94, 1); 
 
    text-align: center; 
 
    display: block; 
 
}

<div class="panel"> 
 
    <h1 class="subHead">Some Projects I Have Worked On</h1> 
 
    <h2 class="description"></h2> 
 
</div> 
 
<div class="project"> 
 
    <a href="https://hidden-brook-12046.herokuapp.com/"> 
 
    <img class="project1" src="./images/featuring.png" alt="" /> 
 
    </a> 
 
    <p class="project1info"> 
 
    Featuring allows a user to search a musical artist and view a list of collaboraters they have worked with. 
 
    </p> 
 
</div>

Answer 1

Начальная установка гибкой контейнера flex-direction: row. Это означает, что дети гибкого контейнера будут выравниваться по горизонтали.

Если вы хотите, чтобы они стек вертикально, переопределите значение по умолчанию flex-direction: column.

.project { 
    display: flex; 
    flex-direction: column; /* NEW */ 
    justify-content: center; 
    vertical-align: top; 
    text-align: center; 
} 

Если по какой-либо причине, вы должны держать контейнер с flex-direction: row, то вы можете добавить flex-wrap: wrap и сделать первый Flex предмета ширину 100%. Это заставит второй элемент гибкости перейти к следующей строке.

.project { 
    display: flex; 
    flex-wrap: wrap; /* NEW */ 
    justify-content: center; 
    vertical-align: top; 
    text-align: center; 
} 
.project > a { 
    flex: 0 0 100%; /* NEW */ 
} 

Answer 2

проверить эту fiddle

.project { 
    display: flex; 
    justify-content: center; 
    flex-direction: column; 
} 

Используйте flex-direction: column;