努力让文字和图像内联

Question

enter image description here我正在尝试在图片下方添加文字并让图片内嵌，我正在让它们对齐以制作幻灯片。请在下面查看我的代码

HTML:

<div class="slideshow-container">

    <div class="mySlides fade">
      <img src="images/British citizenship and Immigration.jpg" alt="British citizenship and Immigration Images">
      <div class="text"><h6>British citizenship and
        Immigration 
        </h6>
      </div>

    <div class="mySlides fade">
        <img src="images/Australian Migration.jpg" alt="Australian Migration Images">
        <div class="text"><h6>Australian Migration</h6>
          <p class = "sent">Our team can assist with a range of Australian visa solutions. Our expert knowledge ensures you receive the best advice for your personal circumstances. </p>
        </div>
      </div>

        <img src="images/Citizenship by investment.jpg" alt="Australian Migration Images">
        <div class="text"><h6>Citizenship-by-investment</h6>
          <p class = "sent">Enjoy the exclusive privileges that dual citizenship and international investment can provide. Our consultants can help you select the right programme and guide you every step of the way. </p>
        </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
      
  </div>
  </div>

CSS

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
  }

  .mySlides
  {
      display: flex;
  }

我试过使用网格模板列显示网格，文本不会在下面显示，这似乎不起作用。

有人有解决办法吗？

Answer 1

尝试在实际元素（即图像和文字）上添加display: inline-block

Answer 2

我设法让它与下面的文字保持一致。

HTML


<div class="row">
    <div class="column animation">
      <img src="images/British citizenship and Immigration.jpg" alt="British citizenship and Immigration">
      <h1>British citizenship and Immigration</h1>
    </div>

    <div class="column">
      <img src="images/Australian Migration.jpg" alt="Australian Migration">
      <h1>Australian Migration</h1>
      <p>Our team can assist with a range of Australian visa solutions. Our expert knowledge ensures you receive the best advice for your personal circumstances.</p>
    </div>

    <div class="column">
      <img src="images/Citizenship by investment.jpg" alt="Citizenship by investment">
      <h1>Citizenship-by-investment</h1>
      <p>Enjoy the exclusive privileges that dual citizenship and international investment can provide. Our consultants can help you select the right programme and guide you every step of the way.</p>
    </div>

      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
 
  </div>

CSS

.row {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 0px 8rem 0px 338px;
    margin-top: -33vh;
    margin-left:10vw;
  }

  .column {
    flex:10%;
    padding: 0 4px;
  }

  .prev, .next {
    cursor: pointer;
    position: relative;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: #115577;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  .next {
    text-decoration: none;
    top:7rem;
    right: 26rem;
    border-radius: 3px 0 0 3px;
  }

  .prev
  {
    text-decoration: none;
    top:7rem;
    left: -126rem;
  }
  .column h1
  {
      font-size:16px;
      margin-left: 2.5rem;
  }

  .column img
  {
      margin-left:1vw;
  }

  .column p
  {
      text-align: center;
      margin-left: 0rem;
      margin-right: 25rem;
  }

  .animation {
    animation-name: animation;
    animation-duration: 1.5s;
  }
  
  @keyframes animation {
    from {opacity: .4}
    to {opacity: 1}
  }

谢谢大家的帮助

努力让文字和图像内联

Struggling to get words and Images inline

html

css

inline

flex3