Menu icon Foundation
Center text on IE11 using flexgrid

Hi,

I am using Foundation 6 Zurb Template with the flexgrid.

I have created icons with text centered below. Looks great on all browsers but on IE 11 the text aligns to the left and there is a large bottom margin below the icon image.

 

<div class="row small-up-4 medium-up-5 large-up-6 align-center">
        
<!-- Item 1 -->
        <div class="index-col columns">
          <div class="index-contain">
            <a href="#">
              <img class="index-icon" src="assets/img/img.png">
            </a>
            <a href="#" class="index-button">Title</a>
          </div>
        </div>
<!-- Item 2 -->
        <div class="index-col columns">
          <div class="index-contain">
            <a href="#">
              <img class="index-icon" src="assets/img/img.png">
            </a>
            <a href="#" class="index-button">Title</a>
          </div>
        </div>
<!-- Ect. 12 Items Total -->
</div>

Any IE11 hacks to get the text to align center?

Thank you!!

foundation 6ZURB Templateie 11center textflexgrid

Hi,

I am using Foundation 6 Zurb Template with the flexgrid.

I have created icons with text centered below. Looks great on all browsers but on IE 11 the text aligns to the left and there is a large bottom margin below the icon image.

 

<div class="row small-up-4 medium-up-5 large-up-6 align-center">
        
<!-- Item 1 -->
        <div class="index-col columns">
          <div class="index-contain">
            <a href="#">
              <img class="index-icon" src="assets/img/img.png">
            </a>
            <a href="#" class="index-button">Title</a>
          </div>
        </div>
<!-- Item 2 -->
        <div class="index-col columns">
          <div class="index-contain">
            <a href="#">
              <img class="index-icon" src="assets/img/img.png">
            </a>
            <a href="#" class="index-button">Title</a>
          </div>
        </div>
<!-- Ect. 12 Items Total -->
</div>

Any IE11 hacks to get the text to align center?

Thank you!!

Rafi Benkual almost 3 years ago

You can use flex properties instead.

 

.parent {
  display: flex:
  justify-content: center;
}

RCD almost 3 years ago

In the example above, class="index-contain" [parent] has display: flexbox applied. I tried adding justify-content: center to the parent as well and there is no change in class="index-button" title [child], and it doesn't center.

Am I missing something?

Thank you!