如何对齐框外和下方的文本？

Question

所以，我正在上一门 TOP 课程，它基本上是关于网络开发的。现在我正在做网站要我做的项目。

我最近一直遇到有关对齐框外下方文本的问题 (div)。

 .title{
    text-align: center;
    font-size:36px;
    font-weight: bolder;
    color: #1F2937;
    margin-top: 45px;
}

    .second_container{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    padding: 30px 0px;
    gap:32px; 
}

    .image{
    border: 4px solid dodgerblue;
    border-radius: 8px;
    width: 150px;
    height: 150px;
    text-align: center;
}

    span.txt{
    font-size: 18px;
}

<div class="title">
    Some random Information.
</div>
<div class="second_container">
    <div class="image">
        <div class="img"></div>
        <span class="txt">This is some subtext under an illustration
            or image.
        </span>
    </div>
    <div class="image">
        <div class="img"></div>
        <span class="txt">This is some subtext under an illustration
            or image.
        </span>
    </div>
    <div class="image">
        <div class="img"></div>
        <span class="txt">This is some subtext under an illustration
            or image.
        </span>
    </div>
    <div class="image">
        <div class="img"></div>
        <span class="txt">This is some subtext under an illustration
            or image.
        </span>
    </div>
</div> <!--end of the random info container-->

我总是在方框中输入文字。但我需要它外面和下面的文字

Answer 1

您的文本嵌套在具有边框的 .image 中，因此它将始终位于内部而无需 absolute 定位。将 border 放在 img 所在的位置，在本例中为 .img。然后文字会在下面流动。

.title {
  text-align: center;
  font-size: 36px;
  font-weight: bolder;
  color: #1F2937;
  margin-top: 45px;
}

.second_container {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  padding: 30px 0px;
  gap: 32px;
}

.img {
  border: 4px solid dodgerblue;
  height: 150px;
  border-radius: 8px;
  text-align: center;
}

.image {
  width: 150px;
}

span.txt {
  font-size: 18px;
}

<!--start of the random info container-->
<div class="title">
  Some random Information.
</div>
<div class="second_container">
  <div class="image">
    <div class="img"></div>
    <span class="txt">This is some subtext under an illustration or image.</span>
  </div>
  <div class="image">
    <div class="img"></div>
    <span class="txt">This is some subtext under an illustration or image.</span>
  </div>
  <div class="image">
    <div class="img"></div>
    <span class="txt">This is some subtext under an illustration or image.</span>
  </div>
  <div class="image">
    <div class="img"></div>
    <span class="txt">This is some subtext under an illustration or image.</span>
  </div>
</div>
<!--end of the random info container-->

如何对齐框外和下方的文本？

How to align a text outside and below a box?

html

css