CSS h3テキストがイメージタグの上に置かれています

Question

私はRailsを使ってイベントアプリケーションを構築していますが、現在私のユーザープロファイルページをスタイリングしています。 「My Events」の下には、イベントのタイトルと日付を示す2つのh3タグを持つ画像を表示するコードループがあります。 h3要素を画像の上に置いて欲しい。私はインデックスのページでこれをやったが、私はユーザーのプロフィールページのために同じを複製するように見えることはできません。現在、私は正しく画像を設定していますが、テキストをその上に置くことはできません。

show.html.erb - - ユーザー

<div class="col-md-7" id="userevents"> 
<div class="row"> 
    <div class="panel panel-default"> 
      <div class="panel-heading">      
       <h2>My Events</h2> 
      </div> 
       <div class="panel-body"> 
        <% @user.events.each do |event| %> 

          <div id="eventblock"> 
           <%= link_to (image_tag event.image.url), event %> 

           <h3><%= link_to event.title, event %></h3> 
           <h3><%= link_to event.date.strftime('%A, %d %b %Y'), event %></h3> 

           <% end %> 
          </div> 

       </div> 
    </div> 
</div> 

そして、私のCSS - 私は、テキストがしたい

理想的

#userevents { 
float: right; 
margin: 50px; 
height: auto; 

} 

#eventblock img { 
width: 300px; 
height: 300px; 
float: left; 
position: relative; 
margin: 20px; 
} 


#eventblock h3 { 
position: absolute; 

} 

ここ

は、私の見解とCSSコードですイメージの一番下に中央に座ります。追加

Answer 1

試してみてください。

#eventblock h3 { 
    z-index:1; 
    left:50%; 
    top:50%; 
    transform:translate(-50%, -50%); 
    margin-right:-50%; 
} 

もZインデックスが必要になる場合があります：あなたの#eventblockのIMGで-1と同様

Answer 2

私はそれを割り出し - 私は同じスタイルを使用していませんでしたが判明ルールをインデックスページとして使用します。ここに修正されたコードがあります。

show.html.erb -

<ul> 
         <% @user.events.each do |event| %> 

         <li class="events" id="eventblock"> 
           <%= link_to (image_tag event.image.url), event %> 
          <div class="text"> 
           <h3><%= link_to event.title, event %></h3> 
           <h3><%= link_to event.date.strftime('%A, %d %b %Y'), event %></h3> 
         </li> 
           <% end %> 
          </div> 
        </ul> 

events.css.scss -

li.events { 
width: 350px; 
height: 350px; 
float: left; 
margin: 20px; 
list-style-type: none; 
position: relative; 

} 

li.events img { 
width: 100%; 
height: 100%; 
border-radius: 25px; 



    } 

    div.text { 

background: transparent; 
padding: 25px; 
position: absolute; 
bottom: 15px; 
left: 25px; 

} 

#eventblock { 
width: 300px; 
height: 300px; 
margin: 10px; 
}