'Struggling to get words and Images inline

enter image description hereI am trying to get text underneath the images and have the images inline, I am getting them in line to make a slide show. Please see my code below

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;
  }

I have tried display grid with grid-template-columns, the text does not go underneath and that does not seem to work.

Anyone have a solution?

htmlcssinlineflex3


Solution 1:[1]

Try to add display: inline-block on the actual Elements( that is the image and the word)

Solution 2:[2]

I managed to get it in line with the text underneath.

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}
  }

Thank you all for your help

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amirhossein Kiani
Solution 2 AspiringDev

Related Questions