Menu icon Foundation
Centering anchor text over an image

I am trying to use the sass display:flex property to center the anchor text over the corresponding link images in a block grid. It's not quite working correctly. any ideas would be greatly appreciated. Thanks

 

<div class="row small-up-1 medium-up-3">

      <div class="column column-block text-center home-nav">
  <div class="row small-up-1 medium-up-3">

      <div class="column column-block text-center home-nav">
        <a href="about.html"><img src="assets/img/img-0001.jpg" class="thumbnail" alt="">ABOUT ME</a>
      </div>

      <div class="column column-block text-center home-nav">
        <a href="events.html"><img src="assets/img/img-0002.jpg" class="thumbnail" alt="">APPEARANCES</a>
      </div>

      <div class="column column-block text-center home-nav">
        <a href="contact.html"><img src="assets/img/img-0003.jpg" class="thumbnail" alt="">CONTACT</a>
      </div>

  </div>
.home-nav{
  a {
  letter-spacing: .2rem;
  font-weight: 250;
  font-size: 1.5rem;
  color: #CFB53B;
  display: flex;
  align-items: center;
  justify-content: center;
  }
}

 

 

flexanchorcenteringimage

I am trying to use the sass display:flex property to center the anchor text over the corresponding link images in a block grid. It's not quite working correctly. any ideas would be greatly appreciated. Thanks

 

<div class="row small-up-1 medium-up-3">

      <div class="column column-block text-center home-nav">
  <div class="row small-up-1 medium-up-3">

      <div class="column column-block text-center home-nav">
        <a href="about.html"><img src="assets/img/img-0001.jpg" class="thumbnail" alt="">ABOUT ME</a>
      </div>

      <div class="column column-block text-center home-nav">
        <a href="events.html"><img src="assets/img/img-0002.jpg" class="thumbnail" alt="">APPEARANCES</a>
      </div>

      <div class="column column-block text-center home-nav">
        <a href="contact.html"><img src="assets/img/img-0003.jpg" class="thumbnail" alt="">CONTACT</a>
      </div>

  </div>
.home-nav{
  a {
  letter-spacing: .2rem;
  font-weight: 250;
  font-size: 1.5rem;
  color: #CFB53B;
  display: flex;
  align-items: center;
  justify-content: center;
  }
}