Question

我有一个图像库，所有210px宽度，但具有不同的高度。

我想在每个图像上放置一个包含“即将推出”字样的div框，背景颜色为实色，高度为30px，宽度未知。 div框需要垂直和水平居中。

我如何在CSS中解决这个问题？

我用Google搜索，尝试了我能想到的一切，但根本没有找到解决方案..

Answer 1

您是否可以使用图库标记作为背景图像，而不是使用图像标记？然后在那个DIV中，只需将你的文字和风格放在你需要的地方。

你可以创建一个带有文本样式，宽度等的CSS类。然后只需使用DIV中的style属性来设置背景图像和高度。

Answer 2

answer by Patrick肯定是一个很好的方法，可以节省一些标记。

但是如果你不能或不想让图像成为容器的背景，你可以使用一些定位选项。例如，如果您可以在“即将推出”部分使用固定宽度，则可以执行以下操作：

ul {
    list-style: none;
    margin: 0 0 0 -2em;
    padding: 0;
}

li {
    position: relative; /* this makes it a containing block */
    float: left;
    margin: 0 2em 2em 0;
    padding: 0;
}

.msg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -15px; /* assuming it's 30 pixels high, half */
    margin-left: -75px; /* assuming it's 150 pixels wide, half */
    width: 150px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    text-align: center;
    background: rgba(0,0,0,.8); /* almost black, f**k old browsers */
}

HTML

<ul>
    <li>
       <img src="/images/meep.png" alt="" />
       <div class="msg">Coming soon.</div>
    </li>
</ul>

请注意，行高：30px是这样的，文本将在容器中垂直居中，如果消息需要转到第二行，这实际上是错误的。在这种情况下，您需要抛弃容器的固定高度，可能添加一些填充，然后使用更传统的线高度，如1.2em。在这种情况下，你需要一些jQuery或其他东西来计算父容器的高度，以获得正确的“top：px”高度。

将一个div放在一个img上

2 个答案: