[Cards] Centered Cards Not Functioning

[jlukic]

From @cyllu2
This simple HTML,

<div class="ui padded row">
    <div class="centered column">
        <div class="ui three stackable cards">
            <div class="blue card">fdsfsdf</div>
            <div class="blue card">fdsfsdf</div>
            <div class="blue card">fdsfsdf</div>
        </div>
    </div>
</div>

should center the cards and then stack them. However, on IE(10) and Safari on iOS and possibly other browsers as well, they are left-aligned all the time, even when stacked.

Semantic-Org/Semantic-UI-Meteor#26

[jlukic]

Hi, centered column is functioning as expected. That will just center a columns content in its row.

Adding a variation like three cards will split the width evenly into thirds so they will always take up the full width and not need to be centered.

The correct "sui" html would be something like:

<div class="ui grid">
    <div class="column">
        <div class="ui stackable centered cards">
            <div class="blue card">fdsfsdf</div>
            <div class="blue card">fdsfsdf</div>
            <div class="blue card">fdsfsdf</div>
        </div>
    </div>
</div>

However this is not functioning correctly Since plural rules are missing centered declarations for flex.

I have resolved this in tests by adding justify-content: center; on cards.
http://jsfiddle.net/srt1zmwd/

I'll fix this in patch