CSS - 文本流和居中

Question

我正在使用Rails構建事件應用程序。在我的索引頁面上，每個事件都由一個相關圖像表示，事件標題和日期根據該圖像進行轉置。這樣的 -

理想情況下，我希望用戶輸入他們的活動標題是「給點」 /「簡潔」不過有我可以控制這種沒有真正的方法我也不會想至。當我嘗試輸入過長的標題出現這種情況 -

我需要的文本流和標題（和日期）在image.At中間的那一刻絕對的中心打破（如下圖所示），並抱住left.This是我的相關代碼，我目前所面對的 -

events.index.html.erb

<ul> 

        <% @events.each do |event| %> 
       <li class="events"> 
         <%= link_to (image_tag event.image.url), event, id: "image" %> 
        <div class="text"> 
         <h2><%= link_to event.title, event %></h2> 
         <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: 20px; 





} 

div.text { 


    padding: 25px; 
    position: absolute; 
    top: 100px; 
    left: auto; 



} 

div.text a { 
    text-decoration: none; 
    color: #FF69B4; 
    font-weight: bolder; 
    padding: 5px; 
    border-radius: 10px;  
    background-color: rgba(255,255,255,.8); 
    -webkit-backdrop-filter: invert(10px); 
    margin: 0 auto; 
    text-align: center; 


} 

我使用的是引導創業板，但不知道這是否是相關的這個問題。任何援助表示讚賞。

Answer 1

我試圖做到這一點，我發現很多教程可以幫助我。不幸的是，border-radius就像我沒有發現有用的東西。 但，而另一方面，在開始和行尾的空間，我固定它：

https://fiddle.jshell.net/s112Lao0/

正如你所看到的，用了border-radius。但有一個不錯的padding。

來源：

https://css-tricks.com/multi-line-padded-text/

http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/

https://fiddle.jshell.net/s112Lao0/

我希望這會有所幫助。 :)