Заголовок над изображением без использования «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

Вы плавающие левые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 для элемента ссылки и position:relative для его родительского элемента. Затем вы можете переместить ссылку через top, right, bottom, left.