CSS - 文本流和居中

Question

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

理想情況下，我希望用戶為他們的事件輸入一個標題，這個標題是'到點'/'簡潔'但是沒有真正的方法我可以控制這個，也不是我想要的。 當我嘗試輸入一個過長的標題時，會發生這種情況 -

我需要文本流動，標題（和日期）絕對居中在圖像的中間。它破壞的那一刻（如下圖所示）並緊貼在左邊。這是我在相關的代碼。時刻 -

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;


}

我正在使用bootstrap gem，但不確定這是否與此問題相關。 任何幫助表示贊賞。

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/

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