私はexampleのようなものを作りたいと思っています。ピクチャを並べて表示
私のコードです。 HTML:
<td>
<a href="/Topicality/Detail/1030" class="topicality-list-match-image">
<img src="/Content/Images/test.jpg" alt="brak obrazka" class="topicality-image-match-single-image" data-detailid="1030">
<img src="/Content/Images/blankshield.png" alt="brak obrazka" class="topicality-image-match-single-image" data-detailid="1030">
<div class="topicality-text-on-images">
2:5
</div>
</a>
</td>
CSS:
.topicality-list-match-image {
height: 80px;
max-width: 110px;
display: inline-flex;
white-space: nowrap;
filter: brightness(100%);
}
.topicality-image-match-single-image {
width: 100%;
object-fit: cover;
overflow: hidden;
}
.topicality-text-on-images {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #30D5C8;
font-weight: bold;
font-size: xx-large;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
これは、Firefoxで動作しますが、私は別のブラウザを使用する場合、それは醜いです。
これは、テキストがテーブル全体の中心部にあり、絵が広くなっていることになります。