Fatal编程技术网
  • html/
  • Html 将文本均匀地放置在图像下

Html 将文本均匀地放置在图像下

html text

Html 将文本均匀地放置在图像下,html,text,distance,Html,Text,Distance,我试图将文本放在图像下，但由于图像的大小不完全相同（并且更改图像大小不是一个选项），如何使文本与图像保持相同的距离 这是我的 <html> <head> <title> MaGa V1 </title> <style type="text/css"> .row{overflow:hidden;} /* Fixes float */

我试图将文本放在图像下，但由于图像的大小不完全相同（并且更改图像大小不是一个选项），如何使文本与图像保持相同的距离

这是我的

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


MaGa V1
.row{overflow:hidden；}/*修复了浮动*/
.img_div{float:left；高度：150px；宽度：200px；$；文本对齐：居中；填充：0px；背景：#121223；}
.img_div:not（：n个子（2））{右边距：0px；}
.img_div a{颜色：金色；}
更新 由于图像高度差异，您要求将
figcaption
均匀地垂直设置。我使用此选项是为了强制执行
figcaption
的统一位置，而不考虑图像高度

变化： 
.img\u div
现在是
.img\u fig
，不再是div，而是
图
。就功能而言，div和
figure
只是块元素。我把它改了，因为它太小了

古老的 将样式放置在块中或单独的文件中（例如
style.css
）。在这个演示中，我将它放在
块中

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

</style>


.....
figcaption{页边距顶部：32px；}
一小条 

MaGa V1
.行{
溢出：隐藏；
}
/*固定浮动*/
.img_图：第一种类型{
右边距：0px；
}
.img_图a{
颜色：金色；
}
身材{
浮动：左；
宽度：200px；
高度：150像素；
文本对齐：居中；
位置：相对位置；
背景：黑色；
}
菲卡普顿{
宽度：100%；
位置：绝对位置；
底部：5px；
}
/*在这里添加样式*/

figcaption{margin top:8px；}
像这样删除

？它不起作用，我将在回答中给你一些详细的说明，待机…好的，对不起，我对html非常陌生，我花了一周时间才得到我目前的o3oNo担忧，请看我的回答，先生。这种方法有效，我现在可以轻松控制图像和文本之间的距离，但它假设图像大小相同，我使用的图像大小大致相同，但不精确，我无法更改它们的大小，那么，有没有一种方法可以根据图片的顶部向下偏移文本（以像素为单位），而不是从图片的底部开始呢？我想我明白你的意思了……你希望每个图像和
figcaption
，都有一个统一的帧尺寸，对吗？这是它看起来的样子，但我需要文本处于相同的水平，即使图像大小不完全相同，但我不能更改图像大小，它们必须保持其大小。太好了，我做了一些更改，它工作了！非常感谢，你意外地解决了我的另一个问题，哈哈！ 
<style>
 .....
figcaption { margin-top: 32px; }

</style>