将文本均匀放置在图像下方

Question

我正在尝试将文本放在图像下方，但由于图像的大小不完全相同（并且无法更改图像大小），我怎样才能使文本与图像的距离相同？

这是我的

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

更新

由于图像高度差异，您要求 figcaption 在垂直方向上均匀设置。我使用 position: relative and absolute 来强制执行 figcaption 的统一位置，而不管图像高度如何。

变化：

            .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 现在是 .img_fig，不再是 div，而是 figure。就功能而言，div 和 figure 只是块元素。我更改了它，因为它是 semantically proper.

旧

在 <style> block or in a separate file (e.g. style.css <link href="style.css" rel="stylesheet">) 中放置样式。在此演示中，我将其放在 <style> 块中。

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

</style>

片段

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

将文本均匀放置在图像下方

Positioning text under a image evenly

html

text

distance

更新

变化：

旧

片段