Question

我正在使用Rails构建一个事件应用程序，目前正在设置我的用户个人资料页面。在“我的活动”下，我有一个代码循环，显示带有两个h3标签的图像，显示事件标题和日期。我希望h3元素位于图像的顶部。我在索引页面上完成了这个，但我似乎无法为用户个人资料页面复制相同的内容。目前我正确设置了图像，但我无法将文本放在它们之上。

这是我的观点和CSS代码 -

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; 

}

理想情况下，我希望文本位于图像底部的中央位置。

Answer 1

尝试添加：

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

也可能需要z-index：#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;
 }

CSS h3文本放在图像标记的顶部

2 个答案: