1

I'm trying to put the text under the images but since the images aren't exactly the same size (And changing the image size is not an option) how can I make the text the same distance from the images?

Here is what I have

<html>
    <head>
        <title>
            MaGa V1
        </title>
        <style type="text/css">
            .row{overflow:hidden;} /* Fixes float */
            .img_div {float:left;height:150px;width:200px;$;text-align:center;padding:0px;background:#121223;}
            .img_div:not(:nth-child(2)){margin-right:0px;}
            .img_div a{color:gold;}
        </style>
    </head>
    <body  bgcolor="white">
        <div class="row">
            <div class="img_div" style="margin-right: 32px">
                <img class="vertCenterImage" src="./../images/Shadows over Innistrad/Shadows over Innistrad.png"/>
                <figcaption>
                    <br>
                    <br>
                    <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
                </figcaption>
            </div>
            <div class="img_div" style="margin-right: 32px">
                <img class="vertCenterImage" src="./../images/Battle for Zendikar/Battle for Zendikar.png"/>
                <figcaption>
                    <br>
                    <br>
                    <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
                </figcaption>
            </div>

        </div>
    </body>
</html>
128Gigabytes
  • 193
  • 1
  • 10

1 Answers1

1

UPDATE

You requested that you need the figcaption evenly set vertically because of image height variances. I used position: relative and absolute in order to enforce a uniform position of figcaption regardless of image height.

CHANGES:

            .img_fig:first-of-type {margin-right:0px;}
            .img_fig a{color:gold;}
            figure { float: left; width: 200px; height: 150px; text-align: center; position: relative; background: black; }
            figcaption {width: 100%; position: absolute; bottom: 5px;}

.img_div is now .img_fig and is no longer a div, it's a figure. As far as functionality goes, div and figure are just block elements. I changed it because it's semantically proper.

OLD

Place styles in the <style> block or in a separate file (e.g. style.css <link href="style.css" rel="stylesheet">). In this demo, I placed it in the <style> block.

<style>
 .....
figcaption { margin-top: 32px; }

</style>

SNIPPET

<html>

<head>
  <title>
    MaGa V1
  </title>
  <style type="text/css">
    .row {
      overflow: hidden;
    }
    /* Fixes float */
    .img_fig:first-of-type {
      margin-right: 0px;
    }
    .img_fig a {
      color: gold;
    }
    figure {
      float: left;
      width: 200px;
      height: 150px;
      text-align: center;
      position: relative;
      background: black;
    }
    figcaption {
      width: 100%;
      position: absolute;
      bottom: 5px;
    }
    /* ADD STYLE HERE */
  </style>
</head>

<body bgcolor="white">
  <div class="row">
    <figure class="img_fig" style="margin-right: 32px">
      <img class="vertCenterImage" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" / width="72" height="72">
      <figcaption>


        <a href="./Shadows over Innistrad.html" target="_self">Shadows over Innistrad</a>
      </figcaption>
    </figure>
    <figure class="img_fig" style="margin-right: 32px">
      <img class="vertCenterImage" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width="64" height="64" />
      <figcaption>

        <a href="./Battle for Zendikar.html" target="_self">Battle for Zendikar</a>
      </figcaption>
    </figure>

    <figure class="img_fig" style="margin-right: 32px">
                <img class="vertCenterImage" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png"/ width="96" height="96">
                <figcaption>


                    <a href="./Shadows over Innistrad.html" target="_self">The Dark</a>
                </figcaption>
            </figure>
    <figure class="img_fig" style="margin-right: 32px">
                <img class="vertCenterImage" src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png"/ width="32" height="32">
                <figcaption>


                    <a href="./Shadows over Innistrad.html" target="_self">Legends</a>
                </figcaption>
            </figure>
  </div>
</body>

</html>
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • This kind works, I can control the distance between the image and text easily now but it assumes the images are the same size, the images I am using are about the same size but not exact, and I can not change their size, so is there a way to offset the text in pixels based on the top of the picture going down rather than starting at the bottom of the picture? – 128Gigabytes May 27 '16 at 21:56
  • I think I get what you're saying...you want a uniform frame dimensions for each image and `figcaption`, correct? – zer00ne May 27 '16 at 21:59
  • This is what it looks like http://i.imgur.com/TTAy8Vh.png but I need the text to be at the same level even though the images are not the exact same size, but I can not change the image size they have to stay the size they are. – 128Gigabytes May 27 '16 at 22:06
  • Great I did a few changes and it works! Thanks a ton, and you accidently fixed another issue I had as well haha! – 128Gigabytes May 27 '16 at 22:44