Menu icon Foundation
Align-center not working

 

The following code in foundation 6.1 correctly aligns the button link centrally. I simply want the button to be centered in the div.

<div class="row column align-center">
  <a class="button no-margin large alert sign_up" href="/users/sign_up">Get started!</a>
</div>

 

However, Updating to 6.2.1 this code no longer centers the button. Removing the display: block in the line below makes it work again. But this feel like a hack and I feel it should work without me doing this.

//foundation-sites/scss/grid/_flex-grid.scss 

.column.row.row, .row.row.columns {
  float: none;
  display: block;
}

 

How do I get align-center to work correctly in 6.2.1?

align-center

 

The following code in foundation 6.1 correctly aligns the button link centrally. I simply want the button to be centered in the div.

<div class="row column align-center">
  <a class="button no-margin large alert sign_up" href="/users/sign_up">Get started!</a>
</div>

 

However, Updating to 6.2.1 this code no longer centers the button. Removing the display: block in the line below makes it work again. But this feel like a hack and I feel it should work without me doing this.

//foundation-sites/scss/grid/_flex-grid.scss 

.column.row.row, .row.row.columns {
  float: none;
  display: block;
}

 

How do I get align-center to work correctly in 6.2.1?

Rafi Benkual about 3 years ago

It works with .text-center

Example: http://codepen.io/rafibomb/pen/VaGbYL

Stewart about 3 years ago

You're a star!

I was unaware that class existed!

Thank you.