How to fix the text inside a block below an image-CodePudding

I've been trying to work on a new section for my website, but I've been having a lot of trouble when trying to keep things aligned in the way I want them too

I've edited a screencap really quick to show what I'm trying to accomplish

And without text, the images line up just fine, but the moment I add text is when everything falls apart

Here's how it looks

How can I get the results I want?

Here's my CSS code

 .downloadscontainer {
  text-align: center;
  }

 .downloadbutton {
  display: inline-block;
  float: left;
  }

 .downloadbutton2 {
  display: inline-block;
  float: center;
  }

 .downloadbutton3 {
  display: inline-block;
  float: center;
  }

And here's the HTML code for the section I'm having trouble with

<div >
<a href="https://mega.nz/file/z6ZzGSAQ#NzUXO0iZ_4ftp9YKnYBptFq5PHG7IYke6QhZ5WskMjE" target="_blank">
<img src="../../downloads/fonts/images/TerminusFont.png" ></a>
<p>This is supposed to be an example</p>

<a href="https://mega.nz/file/C6ZlWZZb#5JGq04jfIP-xGz_xQ-EhpRHA7htTTcg9Pgrp_bqSqw0" target="_blank">
<img src="../../downloads/fonts/images/VisitorFont.png" ></a>
<p>This is also an example</p>

<a href="https://mega.nz/file/CyQFzYKa#Hq7uDGnrni0ZteWg-8s_-8nbAkSJjA1gZIDVcP786Ns" target="_blank">
<img src="../../downloads/fonts/images/JBlackFont.png" ></a>
<p>Another example LOL</p>
</div>

CodePudding user response：

You must use margin

.downloadscontainer {
   margin: 0 auto;
}

CodePudding user response：

Make the .downloadscontainer a flex element (flex is awesome). Then wrap each set of image text in a div.

CSS:

.downloadscontainer {
  display: flex;
  text-align: center;
}

div.wrapper {
    flex: 1;
}

HTML:

<div >
<div >
    <a href="https://mega.nz/file/z6ZzGSAQ#NzUXO0iZ_4ftp9YKnYBptFq5PHG7IYke6QhZ5WskMjE" target="_blank">
    <img src="../../downloads/fonts/images/TerminusFont.png" ></a>
    <p>This is supposed to be an example</p>
</div>
<div >
    <a href="https://mega.nz/file/C6ZlWZZb#5JGq04jfIP-xGz_xQ-EhpRHA7htTTcg9Pgrp_bqSqw0" target="_blank">
    <img src="../../downloads/fonts/images/VisitorFont.png" ></a>
    <p>This is also an example</p>
</div>
<div >
    <a href="https://mega.nz/file/CyQFzYKa#Hq7uDGnrni0ZteWg-8s_-8nbAkSJjA1gZIDVcP786Ns" target="_blank">
    <img src="../../downloads/fonts/images/JBlackFont.png" ></a>
    <p>Another example LOL</p>
</div>
</div>

CodePudding user response：

Try this.

HTML:

<div >
  <div>
    <a href="https://mega.nz/file/z6ZzGSAQ#NzUXO0iZ_4ftp9YKnYBptFq5PHG7IYke6QhZ5WskMjE" target="_blank">
      <img src="../../downloads/fonts/images/TerminusFont.png" >
    </a>
    <p>This is supposed to be an example</p>
  </div>
    
  <div>
    <a href="https://mega.nz/file/C6ZlWZZb#5JGq04jfIP-xGz_xQ-EhpRHA7htTTcg9Pgrp_bqSqw0" target="_blank">
      <img src="../../downloads/fonts/images/VisitorFont.png" >
    </a>
    <p>This is also an example</p>
  </div>
    
  <div>
    <a href="https://mega.nz/file/CyQFzYKa#Hq7uDGnrni0ZteWg-8s_-8nbAkSJjA1gZIDVcP786Ns" target="_blank">
      <img src="../../downloads/fonts/images/JBlackFont.png" >
     </a>
     <p>Another example LOL</p>
   </div>
</div>

CSS:

    .downloadscontainer {
      text-align: center;
      display: inline-flex;
    }
    
    .downloadscontainer > div {
      margin: auto;
    }

CodePudding user response：

Not being able to see your pictures from your code, makes it hard to help you out as I wanted.

But here's a little help:

CSS:

  .downloadscontainer {
  text-align: center;
  display:flex;
  }

 .downloadbutton {
  display: block;
  float: left;
  }

 .downloadbutton2 {
  display: block;
  float: center;
  }

 .downloadbutton3 {
  display: block;
  float: center;
  }

HTML

<div >
<a href="https://mega.nz/file/z6ZzGSAQ#NzUXO0iZ_4ftp9YKnYBptFq5PHG7IYke6QhZ5WskMjE" target="_blank">
<img src="../../downloads/fonts/images/TerminusFont.png" ></a>
<p>This is supposed to be an example</p>

<a href="https://mega.nz/file/C6ZlWZZb#5JGq04jfIP-xGz_xQ-EhpRHA7htTTcg9Pgrp_bqSqw0" target="_blank">
<img src="../../downloads/fonts/images/VisitorFont.png" ></a>
<p>This is also an example</p>

<a href="https://mega.nz/file/CyQFzYKa#Hq7uDGnrni0ZteWg-8s_-8nbAkSJjA1gZIDVcP786Ns" target="_blank">
<img src="../../downloads/fonts/images/JBlackFont.png" ></a>
<p>Another example LOL</p>
</div>

This should keep the images horizontally and the text below the images. But keep an eye on this website, if you want to wrap the text in an image and align the text different, I think float:none; or text-align:center; is what you want to achieve: https://hostpapasupport.com/align-float-images-website/

W3schools has many tutorials and awesome gimmicks to help you out with this matter,

so many code-snippets that could help you out with that too. https://www.w3schools.com/howto/default.asp

I hope I could help you with the sites and the code.