如何覆盖图像上的文字没有对齐问题

由于位置的绝对和相对属性，我无法让它在桌面和移动设备上都显示正确。日期文本文本始终未对齐。任何帮助表示赞赏，谢谢。如何覆盖图像上的文字没有对齐问题

这里是我的代码。

<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

如何覆盖图像上的文字没有对齐问题

回答

相关问题