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。

<小时/>

OLD

将样式放在<style>块中或单独的文件中（例如style.css <link href="style.css" rel="stylesheet">）。在本演示中，我将其放在<style>块中。

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

</style>

段

＆＃13;

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

＆＃13;

将文本均匀地定位在图像下

1 个答案:

更新

变化：

OLD

段