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

【问题标题】：Title over Image without using "position: relative/absolute"不使用“位置：相对/绝对”的图像标题
【发布时间】：2014-02-07 05:52:50
【问题描述】：

我有这个博客，我希望标题显示在图像缩略图上。但正如您在此链接中看到的（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;
}

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

提前致谢

【问题讨论】：

玩弄负面的margin?
你是绝对定位.side-thumbnail h2。你想把标题放在哪里？尝试删除.side-thumbnail a 的float: left 并将text-align: center 添加到.side-thumbnail h2。 BTW display: right 不是有效值。
谢谢 azeós。它工作正常:) 随时回答，我会给你一颗星和一个 +1
如果这正是您想要的，我将其发布为答案。
是的。这正是我想要的。如果您将其作为答案发布，它将使解决方案对有相同问题的其他人更明显。再次感谢您的帮助

标签： html css image position

【解决方案1】：

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

添加：

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

删除：

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

【讨论】：

【解决方案2】：

您可以通过给它一个margin-left: auto 和margin-right:auto 来使元素居中。尝试使用margin-top 和margin-bottom 上下移动图像。

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

【讨论】：

但是图片位置不错。正如您在图像中看到的，只有标题说明是错误的。如果我移动一个，另一个会到达同一个地方。