如何覆蓋圖像上的文字沒有對齊問題

由於位置的絕對和相對屬性，我無法讓它在桌面和移動設備上都顯示正確。日期文本文本始終未對齊。任何幫助表示讚賞，謝謝。如何覆蓋圖像上的文字沒有對齊問題

這裏是我的代碼。

<div class="container"> 
<% @events.each do |event| %> 
<div class="event-picture-block"> 
    <span class="event-date-box"> 
    <%= event.date.strftime("%^b %e") %> 
    </span> 
    <%= link_to event_path(event), class:"link-margin" do %> 
    <%= image_tag(event.image.url(:small), :class =>"event-image") %> 
    <% end %> 
</div> 
<% end %> 
</div> 

.event-picture-block { display: inline;} 
.event-date-box { position: absolute; margin-top: 8em; margin-left: 2.4%; background-color: white; color: black; font-size: 35px; width: 10%; text-align: center; }

移動

來源

2017-02-16 Brian Lau

我做了一個小提琴。我猜測大小，所以只要考慮到這一點。

https://jsfiddle.net/feov9x2h/1/

<div class="container"> 
    <div class="innerBox"> 
    <span class="date">NOV 20</span> 
    </div> 
    <div class="innerBox"> 
    <span class="date">NOV 20</span> 
    </div> 
    <div class="innerBox"> 
    <span class="date">NOV 20</span> 
    </div> 
    <div class="innerBox"> 
    <span class="date">NOV 20</span> 
    </div> 
    <div class="innerBox"> 
    <span class="date">NOV 20</span> 
    </div> 
    <div class="innerBox"> 
    <span class="date">NOV 20</span> 
    </div> 
</div> 

.innerBox { 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
    background: green; 
    padding:0px; 
    margin:0px; 
    float: left; 
    position: relative; 
    border: 1px solid black; 
} 
.date{ 
    padding: 10px 5px; 
    background:white; 
    position: absolute; 
    left: 10px; 
    bottom: 10px; 
}

來源

2017-02-16 12:14:40 Keith

你會把圖像放在那裏？ –

添加它作爲背景：url（）;所以它始終是框 – Keith

的大小，但圖像是從模型生成的，保存在aws s3上。 –

這應該工作。

.event-picture-block { position: relative; } 
.event-date-box { position: absolute; bottom: 10%; left: 10%; }

來源

2017-02-16 12:03:11

都能跟得上它不會，''％永遠是在不同的分辨率凌亂。對於固定的位置，使用'px'，因爲它將保持在所有條件相同的位置。 – vivekkupadhyay

^他是對的。 33.1％ - 第二行文本超出div。 33％，在手機上太小了。但是當我使用px時，它被搞砸了。除非我必須用px替換所有的％？ –

你能通過codepen提供代碼嗎 –

您應該減小字體大小，減小寬度。

來源

2017-02-16 12:07:52

如何覆蓋圖像上的文字沒有對齊問題

回答

相關問題