网格项目中的文本对齐问题答案

【问题标题】：Issue in text alignment in grid items网格项目中的文本对齐问题
【发布时间】：2020-12-31 17:48:27
【问题描述】：

我的文本有问题，我需要将文本和货币部分分开，并且还必须以这样的方式对齐文本，以便每当我以较小的文本查看货币部分到下一行时

.adventure-card {
  display:flex;
  flex-wrap: wrap;
  width: 100%;
  height:auto;
  justify-content:center;
  align-items: center;
  border-radius: 10px 10px 10px 10px;
  position:relative;
  line-height: 1.7;
}
.adventure-card img {
  /* TODO: MODULE_ADVENTURES_GRID */
  /* 1. Fill in the required properties. */
  width: 100%;
  height: 25vh;
  border-radius: 10px 10px 0px 0px;
}

 <div class="container">
    <div class="content">
      <!-- TODO: MODULE_ADVENTURES_GRID -->
      <!-- 1. Create the grid of adventures by adding child elements as required. -->
      <div class = "row">
        <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
          <a href = "resort/index.html">
            <div class = "adventure-card  border bg-light">
              <div class = "adventure-card img-responsive">
                <img src ="/assets/adventures/resort.jpg" alt = "tower.jpg">
              </div>         
                <p>Resort</p>
                <p>&#8377;1,200 </p>
            </div>
          </a>
         </div>
     
        </div>
        <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
         <div class = "adventure-card  border bg-light">
           <div class = "adventure-card img-responsive">
             <img src ="/assets/adventures/mount.jpg" alt = "Skiing.jpg">
           </div>
             <p> Skiing</p>
             <p>&#8377;1,900 </p>
         </div>
        </div>
      </div>
      <div class = "row">
       <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
        <div class = "adventure-card  border bg-light">
          <div class = "adventure-card img-responsive">
            <img src ="/assets/adventures/canopy.jpg" alt = "tower.jpg">
          </div>         
            <p>Canopy</p>
            <p>&#8377;1,800 </p>
        </div>
       </div>
       <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
         <div class = "adventure-card  border bg-light">
           <div class = "adventure-card img-responsive">
             <img src ="/assets/adventures/beachside.jpg" alt = "canopy.jpg">
           </div>
           <p mb-0>Beach Getaway</p>
           <p>&#8377;2,200 </p>
         </div>
        </div>
     </div>
    </div>
  </div>

谁能帮帮我？ text 和 money 部分居中，符合预期，但无法分隔 text 和 money 部分

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

请参考我下面添加的代码，有任何疑问请告诉我。


<div class="adventure-card  border bg-light">
  <div class="adventure-card img-responsive">
    <img src="/assets/adventures/resort.jpg" alt="tower.jpg" />
  </div>         
  <div class="text-center">
    <h5 mb-0>resort</h5>
    <span>&#8377;1,200</span>
  </div>
</div>

【讨论】：

【解决方案2】：

使用这个：

 &lt;p style="padding-left:20px"&gt;&amp;#8377;1,200 &lt;/p&gt;

为您的货币 P 标签添加内联 CSS。

【讨论】：

【解决方案3】：

添加“flex-direction: column;”到你的 CSS：

.adventure-card {
  display:flex;
  flex-wrap: wrap;
  width: 100%;
  height:auto;
  justify-content:center;
  align-items: center;
  border-radius: 10px 10px 10px 10px;
  position:relative;
  line-height: 1.7;
  flex-direction: column;
}

【讨论】：