在图像上垂直居中对齐figcaption

Question

我正在尝试以居中的方式对齐图像上的figcaption： 到目前为止，我有以下代码：

.portfolio-item figcaption{
    position: relative;
    top: -40px;
    left: -20px;
    width: 280px;
    background: rgb(52,152,219);
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10px 5px 10px 5px;
}

以下是HTML示例：

对于以下的HTML：

<!-- PORTFOLIO IMAGE 1 -->

<div class="portfolio-item">
    <figure>
        <img  src="assets/img/portfolio/folio01.jpg" alt="">
        <figcaption>
                <h5>UI DESIGN</h5>
                <a data-toggle="modal" href="#myModal" >Take a Look</a>
        </figcaption>
    </figure>
</div>

问题是，为了居中它，我使用了 left: -20px; 这种方法，但这显然不够响应式。有什么好的建议吗？谢谢。

- Hetana

---

使用百分比代替像素(px)。 - Dimag Kharab

你的代码还不够好，但是尝试使用 margin: 0 auto 并且去掉 left 属性。另外，你的 padding 可以简化为 padding: 10px 5px，不需要重复两次相同的值。 - Aziz

谢谢关于填充的提示。但是边距好像不起作用 :( - Hetana

我发布了另一个答案。希望它能帮到你。 - Michael Benjamin

谢谢，flexbox 对我来说更加舒适，而且它的效果非常好！实际上，我必须使用 order: 1;。 - Hetana

Answer 1

Flexbox可以做到这一点。您不需要使用相对（或绝对）定位。

• 将整个figure元素设为具有column方向的flex容器。
• 使用align-items: center使图像和标题居中。
• 使用flex order属性切换图像和标题的顺序。

figure {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.portfolio-item figcaption {
 
 order: -1;             /* default value for all flex items is 1 */
 
 display: flex;
        flex-direction: row;
        justify-content: space-around;
 
        width: 280px;
        background: rgb(52, 152, 219);
        color: white;
        padding: 10px 5px 10px 5px;
 
 /* REMOVED
 position: relative;
        top: -40px;
        left: -20px; */
}

<div class="portfolio-item">
    <figure>
        <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
        <figcaption>
            <h5>UI DESIGN</h5>
            <a data-toggle="modal" href="#myModal">Take a Look</a>
        </figcaption>
    </figure>
</div>

- Michael Benjamin

---

我会试一下，但是-40的顶部是因为它与图像重叠了。 - Hetana

所以我需要删除顶部属性才能使其工作（是的，它可以工作！）但是，我需要将标题覆盖在图片上方40像素...有什么想法吗？ 非常感谢！编辑：找到了解决方法：底部40像素可以工作;) - Hetana

Answer 2

figure {
 position: relative;
 height: 400px;
 border: 1px dashed red;
}

figure > img {
 position: absolute;
 left: 50%;                     /* horizontal alignment */
 transform: translateX(-50%);   /* horizontal alignment (fine tuning) */
 z-index: -1;                   /* keep image under figcaption always */
}

figure > figcaption {
 position: absolute;
 top: 40%;                      /* vertical alignment */
 left: 50%;
 transform: translateX(-50%);
 
 display: flex;
        flex-direction: row;
        justify-content: space-around;
 
        width: 280px;
        background: rgb(52, 152, 219);
        color: white;
        padding: 10px 5px 10px 5px;
}

<div class="portfolio-item">
    <figure>
        <img src="http://i.imgur.com/60PVLis.png" width="200" height="200" alt="">
        <figcaption>
            <h5>UI DESIGN</h5>
            <a data-toggle="modal" href="#myModal">Take a Look</a>
        </figcaption>
    </figure>
</div>

- Michael Benjamin