0
"column"を含む列の内側にある画像に水平方向と垂直方向にh4タイトルを配置する方法を試しましたファンデーション6内のブロックグリッド内の「ブロック」プロパティを使用します。zurb foundationの列column-blockの画像上にテキストを縦横に並べる方法6
最初の画像では多少動作するようになりましたが、反応がなく、正しくはありません。私はこの特定の問題に対処するウェブ上のものは何も見つかりません。私はそれが解決することがとても驚きです。
は、ここに私のコード（私は様々なオプションをしようとしてきたので、私はまだいくつかのインラインコードを持っている...）です：
CSS：
.event-row {
position: absolute;
bottom: 58%;
max-width: 100%;
margin: auto;
padding-left: 8%;
}
.event-title {
position: relative;
margin: auto;
text-align: center;
vertical-align: center;
display: inline-block;
max-width: 100%;
}
HTML：
<body>
<div class="row small-up-2 medium-up-3 large-up-3" style="position: relative;">
<div class="column column-block">
<img src="assets/events/book-release.jpg" width="600" height="600" class="thumbnail" alt="">
<div class="row event-row">
<div class="small-12 columns">
<h4 class="event-title" style="color:white;">
BOOK PARTIES
</h4>
</div>
</div>
</div>
<div class="column column-block">
<img src="assets/events/tent-event.jpg" width="600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="assets/index/cooking-class-cu.jpg" width="600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="assets/index/wedding.jpg" width="600" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="assets/events/moulin-rouge-cropped.jpg" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="assets/events/conservatory-lunch-cropped.jpg" alt="">
</div>
<div class="column column-block">
<img src="assets/events/tea-party-cropped.jpg" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="assets/events/rehearsal-dinner-cropped.jpg" class="thumbnail" alt="">
</div>
<div class="column column-block">
<img src="assets/events/baby-party.jpg" width="600" class="thumbnail" alt="">
</div>
</div> <!-- end row -->
</div> <!-- end body -->