128Gigabytes 128Gigabytes - 6 months ago 13
HTML Question

Positioning text under a image evenly

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>

Answer

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>