如何在 CSS 中将图像居中于另一个图像之上答案

【问题标题】：How to center an image over another image in CSS如何在 CSS 中将图像居中于另一个图像之上
【发布时间】：2014-09-26 20:36:14
【问题描述】：

我想将图书图片缩略图及其标题/作者放在另一张图片上。花了一些时间让底部图像显示在段落文本下方而不是分解。现在我已经解决了这个问题，我不知道如何让书的图像回到它后面图像的顶部中心。所以，我只是想让那些缩略图图像居中在它们后面的白色图像之上。这是页面：mcs.athens.edu/~lgeorge1/books.html

编辑：现在我想知道如何使文本（作者/标题）居中在图书图像下方。我会认为 text-align: center;会做的，但没有。这让我的强迫症快疯了，哈哈。

还有我的代码：

div.thumbnail
{width: 250px;
text-align: center;
float: left;
margin: 0 10px 10px 0;
background: url(images/white2.jpg) no-repeat;
}
.thumbnail img
{margin: 30px 0 0 40px;
width: 150px;
border: 1px solid #777;
}
.thumbnail p
{margin: 0;
padding: 10px 30px 40px 10px;
background: url(images/white2.jpg) no-repeat 0 100%;
}
.clear{clear: left;}

【问题讨论】：

标签： css html image

【解决方案1】：

请记住，当您想将非文本块居中时，请使用专用于该目的的 margin:0 auto;。另外，如果您制作图片display:inline-block，我认为您可以使用text-align:center
希望对您有所帮助。

【讨论】：

好吧，当我将 display:inline-block 添加到 img 时，text-align 不起作用。但我会尽量记住 margin: 0 auto;因为它使图像居中。谢谢！

【解决方案2】：

你需要改变的是缩略图img的边距样式，即：

.thumbnail img {
   margin: 0 auto; /* this will center the image */
}

然后只需将margin-top放在父a元素上，即：

.thumbnail a {
   display: block; /* need this to wrap it around child image */
   margin-top: 30px; /* add your margin top here */
}

我可以建议一些更简洁的标记和样式来获得相同的结果，但上面建议的更改应该适用于您的标记。

【讨论】：

这似乎不起作用。它实际上将书籍图像（顶部图像）推得更远，因此顶部突出并且不在其后面的图像上。实际上，我通过在 .thumbnail img 中更改边距来使其居中
以及解释你需要应用 display: block 到你的父元素并在那里设置 margin-top 以修复顶部突出。当我测试它时工作正常。

【解决方案3】：

图片：

    div.thumbnail {
    width: 250px;
    text-align: center;
    float: left;
    margin: 0px 10px 10px 0px;
    background: url('images/white2.gif') no-repeat scroll 0% 0% transparent;
    height: 350px;
}

对于段落：

.thumbnail p {
    margin: 0px auto;
    width: 152px;
    text-align: center;
}

不应使用background 或padding 作为段落，而应指定缩略图的高度。

【讨论】：

你知道如何让书图下的文字以该图为中心吗？至少在它后面的图像中居中？我认为 text-align: center;会这样做，但没有。