Grid centered not rendered properly

[AlvMF1]

Steps

<Grid centered verticalAlign='middle' />

Expected Result

<div class="ui grid center aligned middle aligned>
</div>

Actual Result

<div class="ui grid centered middle aligned>
</div>

Version

0.56.12

Testcase

http://codepen.io/anon/pen/ALzoLV

[sprmn]

Hey @AlvMF1!
I don't think this is a real bug, but some misunderstanding regarding the workings of the vertical alignment.

According to the docs:

A grid can specify its vertical alignment to have all its columns vertically centered.

So, basically this means a vertically aligned grid will center all its columns vertically. This is exactly what happens in your Testcase (you can see for yourself if you give the Grid a static height). In order to make this look like you probably would like to, you'll have to make sure this Grid element will have the right height (for example 100%), by adding some styling.

Hope this will help you!

[AlvMF1]

@sprmn Thanks for your reply. I apologize if I was not clear enough, but I'm talking about the horizontal alignment.
What I'm trying to achieve is, having a container with height=100%, center an element horizontally and vertically.
The workaround was adding className='center aligned' to <Grid>. But I thought it was worth mentioning here.

[sprmn]

Okay, I misunderstood, however the same thing applies for horizontal centering. The problem is that the column that you add to the first column is taking up the whole space, so it is center aligned, however you'll have to add a certain width in order to see it. If you would like to center align the text you'll have to use the textAlign='center'.

Hope this does help you.