如何将箭头与相应的圆圈对齐？

Question

1. 我正在尝试将箭头与圆心对齐
2. 如何在移动视图中将箭头方向更改为向下箭头，以使图像的顺序类似于向下箭头指向的其他顺序。

下面是我试过的代码

img {
  width: 32px;
  height: 32px
}

.icon-holder {
  background-color: #2E51FF;
  width: 75px;
  height: 75px;
  border-radius: 75px;
  line-height: 75px;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container-fluid p-4">
  <div class="row text-center">
    <div class="col">
      <h4 class="mb-0 pb-3 font-weight-bolder">Step 1</h4>
      <div class="icon-holder mx-auto">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
      </div>
      <h2 class="mb-0 pt-3 font-weight-bolder">100+</h2>
      <p class=" text-muted font-weight-bold">Properties Listed</p>
    </div>
    <div class="col my-auto">
      <h1 class="">></h1>
    </div>
    <div class="col ">
      <h4 class="mb-0 pb-3 font-weight-bolder">Step 2</h4>

      <div class="icon-holder mx-auto">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
      </div>
      <h2 class="mb-0 pt-3 font-weight-bolder">&#8369; 4.5 MN. </h2>
      <p class=" text-muted font-weight-bold">Tokenized value of properties listed</p>
    </div>
    <div class="col my-auto">
      <h1 class="">></h1>
    </div>
    <div class="col ">
      <h4 class="mb-0 pb-3 font-weight-bolder">Step 3</h4>

      <div class="icon-holder mx-auto">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
      </div>
      <h2 class="mb-0 pt-3 font-weight-bolder"> 7 MN. +</h2>
      <p class=" text-muted font-weight-bold">Token Traded Volume</p>
    </div>
    <div class="col my-auto">
      <h1 class="">></h1>
    </div>
    <div class="col">
      <h4 class="mb-0 pb-3 font-weight-bolder">Step 4</h4>
      <div class="icon-holder mx-auto">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
      </div>
      <h2 class="mb-0 pt-3 font-weight-bolder"> 10%</h2>
      <p class=" text-muted font-weight-bold">Avg tokenization of properties listed</p>
    </div>
  </div>
</div>

Answer 1

我已经重组了div 并添加了一些引导类。请相应调整间距。希望对你有帮助

img {
  width: 32px;
  height: 32px
}

.icon-holder {
  background-color: #2E51FF;
  width: 75px;
  height: 75px;
  border-radius: 75px;
  line-height: 75px;
}


@media only screen and (max-width: 600px){
  h1.arrow {
    transform: rotate(90deg);
  }
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="container-fluid p-4">
  <div class="row text-center">
    <div class="col">
      <h4 class="mb-0 pb-3 font-weight-bolder">Step 1</h4>
      <div class="d-flex align-items-center">
        <div class="icon-holder mx-auto">
          <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
        </div>
        
        <div>
          <h1 class="arrow">></h1>
        </div>
      </div>
      <h2 class="mb-0 pt-3 font-weight-bolder">100+</h2>
      <p class=" text-muted font-weight-bold">Properties Listed</p>
    </div>
    <div class="col ">
      <h4 class="mb-0 pb-3 font-weight-bolder">Step 2</h4>

      <div class="icon-holder mx-auto">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
      </div>
      <h2 class="mb-0 pt-3 font-weight-bolder">&#8369; 4.5 MN. </h2>
      <p class=" text-muted font-weight-bold">Tokenized value of properties listed</p>
    </div>
    <div class="col my-auto">
      <h1 class="">></h1>
    </div>
    <div class="col ">
      <h4 class="mb-0 pb-3 font-weight-bolder">Step 3</h4>

      <div class="icon-holder mx-auto">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
      </div>
      <h2 class="mb-0 pt-3 font-weight-bolder"> 7 MN. +</h2>
      <p class=" text-muted font-weight-bold">Token Traded Volume</p>
    </div>
    <div class="col my-auto">
      <h1 class="">></h1>
    </div>
    <div class="col">
      <h4 class="mb-0 pb-3 font-weight-bolder">Step 4</h4>
      <div class="icon-holder mx-auto">
        <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" alt="" srcset="">
      </div>
      <h2 class="mb-0 pt-3 font-weight-bolder"> 10%</h2>
      <p class=" text-muted font-weight-bold">Avg tokenization of properties listed</p>
    </div>
  </div>
</div>

Answer 2

您可以使用媒体查询来旋转箭头

@media only screen and (max-width: 600px) {
  .arrow-image {
     transform: rotate(90deg)
   }
}

你可以使用它来居中

display: block;
margin: auto;