Mshark Mshark - 17 days ago 7
CSS Question

Trying to align text under an image using flexbox

I am trying to align a

p
tag underneath an image. Should be simple but I've messed around with this for a bit and must not be seeing something. Here is my code:



.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

An initial setting of a flex container is flex-direction: row. This means that the children of a flex container will align horizontally.

If you want them to stack vertically, override the default with flex-direction: column.

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

If, for whatever reason, you need to keep the container with flex-direction: row, then you can add flex-wrap: wrap and give the first flex item a width of 100%. This will force the second flex item to wrap to the next line.

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