时间戳

首页 > 解决方案 > 如何对齐图片下方的简短文字？

html - 如何对齐图片下方的简短文字？

问题描述

我正在尝试将我的demo文本对齐到我的图像下方。我目前正在使用引导程序，但是如何在图像下方和::afterdiv 之间对齐图标> 布局

<section>
    <h2 class="main-title">
        <font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Test process</font></font>
    </h2>
    <div class="container demo">
        <div class="row" style="text-align: center;">
            <div class="steps">
                <img src="https://code.google.com/images/developers.png" style="height: 80px;" />
            </div>
            <div class="col-md-6 col-xs-6">
                <h2 class="steps__title">How It Works</h2>
                <p>demo</p>
            </div>
        </div>
         <div class="row" style="text-align: center;">
            <div class="steps">
                <img src="https://code.google.com/images/developers.png" style="height: 80px;" />
            </div>
            <div class="col-md-6 col-xs-6">
                <h2 class="steps__title">How It Works</h2>
                <p>demo</p>
            </div>
        </div>
         <div class="row" style="text-align: center;">
            <div class="steps">
                <img src="https://code.google.com/images/developers.png" style="height: 80px;" />
            </div>
            <div class="col-md-6 col-xs-6">
                <h2 class="steps__title">How It Works</h2>
                <p>demo</p>
            </div>
        </div>
    </div>
</section>

标签： htmlcsstwitter-bootstrap

解决方案

首先，您使用的引导程序非常错误。请研究如何在 Bootstrap 上使用容器、行、弹性和列。在这里检查。其次，始终在 col 中使用单独的 div。

这是我的片段检查这个，请你预览整个页面。

  .icon img {
    margin-top: 10px;
  }

  .details h2 {
    font-weight: 400;
    font-size: 25px;
    color:#515f7f;
  }

  .details p {
    margin-top: -5px;
  }
<!DOCTYPE html>
<html>

<head>
<title>arg0-container</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>

  <section class="mt-5">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="icon d-flex">
            <img src="https://code.google.com/images/developers.png" height="80px" />
            <div class="details ml-4 mt-2 text-center d-block">
              <h2>How It <br> Works</h2>
              <p>Demo</p>
            </div>
          </div>
          <p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
        </div>
        <div class="col-md-4">
          <div class="icon d-flex">
            <img src="https://code.google.com/images/developers.png" height="80px" />
            <div class="details ml-4 mt-2 text-center d-block">
              <h2>How It <br> Works</h2>
              <p>Demo</p>
            </div>
          </div>
          <p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
        </div>
        <div class="col-md-4">
          <div class="icon d-flex">
            <img src="https://code.google.com/images/developers.png" height="80px" />
            <div class="details ml-4 mt-2 text-center d-block">
              <h2>How It <br> Works</h2>
              <p>Demo</p>
            </div>
          </div>
          <p class="ml-2 mt-3">Lorem ipsum dolor sit amet!</p>
        </div>
      </div>
    </div>
  </section>
  
</body>

</html>

推荐阅读