0

I'm developing a website for a school project and I'm trying to get images to display across a page with text underneath. I've been looking at it for ages but I can't seem to get anything to work, I've also tried setting margins. And I'm all out of ideas. Right now the images are displayed but there all pushed to the left side instead of in the middle evenly spread out. Thanks

.middle {
  position: relative;
  overflow: hidden;
}

.rowone {
  float: left;
  width: 200px;
  margin: 1% 1% 45px 1%;
}

.text {
  position: absolute;
  bottom: 0px;
  margin: 30px;
  background-color: gray;
}

.rowone img {
  width: 100%;
  display: block;
}
<section class="middle">

  <div class="rowone">
    <img src="images/logofootball.png" height="200" width="200">
    <div class="text">Text</div>
  </div>
  <div class="rowone">
    <img src="images/logofootball.png" height="200" width="200">
    <div class="text">Text</div>
  </div>
  <div class="rowone">
    <img src="images/logofootball.png" height="200" width="200">
    <div class="text">Text</div>
  </div>
  <div class="rowone">
    <img src="images/logofootball.png" height="200" width="200">
    <div class="text">Text</div>
  </div>
</section>

Thanks for any help. Sorry if the code isn't displayed properly I'm not too sure how you're meant to do it.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Rizaury
  • 11
  • 2

1 Answers1

0

Get rid of position:absolute and set width to fit-content and margin to auto.

.middle {
    position: relative;
    overflow: hidden;
}

.rowone {
    float: left;
    width: 200px;
    margin: 1% 1% 45px 1%;
}

.text {
    bottom: 0px;
    width:fit-content;
    margin: auto;
    background-color: gray;
}

.rowone img {
    width: 100%;
    display: block;
}
<section class="middle">

        <div class="rowone">
            <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200">
            <div class="text">Text</div>
        </div>
        <div class="rowone">
            <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200">
            <div class="text">Text</div>
        </div>
        <div class="rowone">
            <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200">
            <div class="text">Text</div>
        </div>
        <div class="rowone">
            <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" height="200" width="200">
            <div class="text">Text</div>
        </div>
    </section>
Spectric
  • 30,714
  • 6
  • 20
  • 43
  • Hi sorry for it wasnt clear I wanted to know how to centre the images and text (In the same position) to the middle of the page – Rizaury May 19 '21 at 16:03