Question

我想知道是否可以使用table-cell和vertical-align将文本置于中间位置，并将其置于图像元素的绝对位置。

我使用以下HTML：

<article class="grid_12 post-entry">
                    <a href="#" title="">
                    <figure class="post-thumb">
                        <img src="images/placehold-blog.png" alt="Placehold">

                        <figcaption class="center">
                            <p>Entry</p>
                            <h3>Fris. Responsive. Retina Ready.</h3>

                            <p>By Casper Biemans  /  On June 3, 2014  /  In Digital Art</p>
                            <a href="#" title="BLOG" class="button tertiaire">Read more &rarr;</a>
                        </figcaption><!-- End figcaption -->
                    </figure><!-- End figure.post-thumb -->
                    </a>
                </article><!-- End article.grid_12 post-entry -->

和CSS：

.entry { 
    margin: 0 0 -30px;  
    display: inline-block; 
}
.post-entry { margin: 0 10px 20px; }
.post-entry a { display: inline; }
.post-entry figure { 
  position: relative; 
  overflow: hidden; 
}

.post-entry a figure > img { -webkit-transition: all .2s ease-in-out; }
.post-entry a figure:hover > img { -webkit-transform: scale(1.1); }

.post-entry figcaption {
    height: 100%;
    width: 100%;
    //background: #000;
    background: rgba(0, 0, 0, .80);

    position: absolute;
    top: 0;
    left: 0;

    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

我想听听你的意见。卡斯帕

如何使用表格单元格和垂直对齐绝对？

0 个答案: