Question

我想将图书缩略图及其标题/作者放在另一张图片上。花了一些时间才能让底部图像显示在段落文本下而不是分解。既然我已经解决了这个问题，我就无法弄清楚如何将书籍图像放回到它后面图像的顶部中心。所以，我只是希望将这些缩略图集中在它们后面的白色图像上。这是页面：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;}

Answer 1

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

Answer 2

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

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

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

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

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

Answer 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作为段落，而应指定缩略图的高度。

如何将图像居中于CSS中的另一个图像

3 个答案: