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

【问题标题】：Positioning text under a image evenly将文本均匀地放置在图像下方
【发布时间】：2016-09-26 07:39:21
【问题描述】：

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

这就是我所拥有的

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

【问题讨论】：

figcaption { margin-top: 8px; } 去掉<br/>
喜欢这个？它不工作
依尼翠上的阴影
我会在回答中给你一些详细的说明，待命...
好吧，对不起，我对 html 很陌生，我花了大约一周的时间才得到我目前拥有的东西 o3o
别担心，看我的回答，先生。

标签： html text distance

【解决方案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> 块或单独的文件中（例如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>

【讨论】：

这种工作，我现在可以轻松控制图像和文本之间的距离，但它假设图像大小相同，我使用的图像大小大致相同但不精确，我不能改变它们的大小，那么有没有办法根据图片顶部向下而不是从图片底部开始偏移以像素为单位的文本？
我想我明白你在说什么......你想要每个图像和figcaption 的统一框架尺寸，对吗？
这是i.imgur.com/TTAy8Vh.png 的样子，但即使图像大小不完全相同，我也需要文本处于同一水平，但我无法更改它们必须的图像大小保持它们的大小。
太棒了，我做了一些更改，而且效果很好！非常感谢，你不小心解决了我遇到的另一个问题哈哈！