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

左侧 a内的h2。只需将a置于h2内。

添加：

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

卸下：

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

Answer 2

您可以通过为元素margin-left: auto和margin-right:auto设置中心。尝试使用margin-top和margin-bottom上下移动图像。

此外，您可以将CSS属性position:absolute用于link元素，将position:relative用于其父元素。然后，您可以通过top, right, bottom, left移动链接。

不使用“位置：相对/绝对”的图像标题

2 个答案: