我已经尝试了很多方法来将 h4 标题水平和垂直居中放置在图像上，该图像位于 Foundation 6 的 block 网格中具有“column-block”属性的列内。
我确实让它在第一张图片上有点工作，但它没有响应，我知道这是不对的。我在网上找不到任何解决这个特定问题的东西；我很惊讶这很难解决。
这是我的代码(我仍然有一些内联代码，因为我一直在尝试各种选择...):
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 -->
最佳答案
如果您要在列内使用图像，那么最好对文本使用 position: absolute。
Foundation 对此有一个 mixin
@include absolute-center;
哪个是
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
关于html - 如何在 zurb foundation 6 中的列列 block 中垂直和水平对齐图像上的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46412153/