html - 不使用 "position: relative/absolute"的图像标题

Question

我有这个博客，我希望标题显示在图像缩略图上。但是正如您在此链接(http://i.imgur.com/Tbvqihh.png)中看到的那样，标题始终保持在同一位置。

这是我的 HTML:

<div class="side-topart">    
                <h3>Top Articles</h3>
                <ul>
                    <li>
                        <div class="side-thumbnail">
                            <img src="img/etam-cru.jpg" />
                             <!-- Fazer um title preview apenas com php -->
                            <h2><a href="#">Street Art by ETAM CRU, in Poland.</a></h2>
                        </div>
                    </li>
                    <li>
                        <div class="side-thumbnail">
                            <img src="img/vhils.jpg" />
                             <!-- Fazer um title preview apenas com php -->
                            <h2><a href="#">Street Art by Vhils, in Portugal.</a></h2>
                        </div>
                    </li>
                    <li>
                        <div class="side-thumbnail">
                            <img src="img/banksy.jpg" />
                             <!-- Fazer um title preview apenas com php -->
                            <h2><a href="#">Street Art by Banksy, in the UK.</a></h2>
                        </div>
                    </li>
                </ul>
            </div>

这是 CSS:

.side-topart {
    padding-top: 30px;
}

.side-topart ul{
    padding-top: 20px;
}

.side-thumbnail{
    position: relative; 
    width: 100%; /* for IE 6 */
}

.side-thumbnail img{
    width: 330px;
    height: 130px;
    float:left;
    display:block;
}

.side-thumbnail h2{
   opacity: 0.7;
   position: absolute; 
   top: 50px; 
   left: 0; 
   width: 275px; 
   background: #000 ;

}

.side-thumbnail a{
    display:right;
    padding: 10px 10px 10px 10px;
    float: left;
    color: #FFF;
    line-height: 150%;
    text-align: justify;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
}

我认为问题在于定位，那么不使用此属性的最简单方法是什么？

提前致谢

Answer 1

您正在向左浮动 h2 内的a。只需将 a 置于 h2 的中心。

添加:

.side-thumbnail h2 {
    text-align: center;
}

删除:

.side-thumbnail a {
    display: right; /* That's not a valid value */
    float: right;
}