时间戳

首页 > 解决方案 > 在响应式 div 下定位文本

html - 在响应式 div 下定位文本

问题描述

我正在寻找将文本直接放置在响应式 div（图像）下方的帮助。

有问题的 div 在页面上上下跳跃以很好地适应视口，但我不知道如何修复应该始终居中在每个图像下方的文本。

文本对齐：居中；在最大视口上工作得很好，但是一旦框响应较小的窗口，文本就不会在中心完全跟随它们，它有点向侧面倾斜。

任何建议表示赞赏，不确定我的代码片段将如何工作......

.flexgrid {
    display: flex; 
    flex-direction: row;
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
}

.flexgrid > li { 
    width: 20%; 
    list-style-type: none;
}


@media only screen and (max-width: 1337px) {
  .flexgrid > li { 
        width: 25%;
    }
}


@media only screen and (max-width: 1072) {
  .flexgrid > li { 
        width: 35%;
    }
}
<ul class="flexgrid">

    <li><div class="col-lg-2 col-sm-6"><img src="https://dummyimage.com/300x300/000/fff" alt="" style="display: block; height: 250px; width: 250px; margin: 5px;"></div>Coal</li>
    <li><div class="col-lg-2 col-sm-6"><img src="https://dummyimage.com/300x300/000/fff" alt="" style="display: block; height: 250px; width: 250px; margin: 5px;"></div>Dry Wood</li>
    <li><div class="col-lg-2 col-sm-6"><img src="https://dummyimage.com/300x300/000/fff" alt="" style="display: block; height: 250px; width: 250px; margin: 5px;"></div>Something else</li>
    <li><div class="col-lg-2 col-sm-6"><img src="https://dummyimage.com/300x300/000/fff" alt="" style="display: block; height: 250px; width: 250px; margin: 5px;"></div>Something else</li>
    <li><div class="col-lg-2 col-sm-6"><img src="https://dummyimage.com/300x300/000/fff" alt="" style="display: block; height: 250px; width: 250px; margin: 5px;"></div>Something else</li>
    
</ul>

标签： htmlcssflexbox

解决方案

您可以使用figure和figcaption标签（即，将文本放在图像下并将它们作为一个单元处理的常用方法），可以根据需要设置样式 - 见下文。图像和文本的边框，背景等也可以这样。

.flexgrid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.flexgrid>li {
  width: 20%;
  list-style-type: none;
}

figure {
  width: 100%;
  text-align: center;
}

img {
  width: 100%;
  height: auto;
  display: block;
  padding: 5px;
  box-sizing: border-box;
}

figcaption {
  text-align: center;
}

@media only screen and (max-width: 1337px) {
  .flexgrid>li {
    width: 25%;
  }
}

@media only screen and (max-width: 1072) {
  .flexgrid>li {
    width: 35%;
  }
}
<ul class="flexgrid">

  <li>
    <div class="col-lg-2 col-sm-6">
      <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""
        <figcaption>Coal</figcaption>
      </figure>
    </div>
  </li>
  <li>
    <div class="col-lg-2 col-sm-6">
      <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""
        <figcaption>Dry Wood</figcaption>
      </figure>
    </div>
  </li>
  <li>
    <div class="col-lg-2 col-sm-6">
      <figure><img src="https://dummyimage.com/300x300/000/fff" alt=""
        <figcaption>Something else</figcaption>
      </figure>
    </div>
  </li>
  <li>
    <div class="col-lg-2 col-sm-6">
      <figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
        <figcaption>Something else</figcaption>
      </figure>
    </div>
  </li>
  <li>
    <div class="col-lg-2 col-sm-6">
      <figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
        <figcaption>Something else</figcaption>
      </figure>
    </div>
  </li>

</ul>

推荐阅读