Centering vertically on equal height columns


#1

Hi!

I’m trying to layout a form using Semantic UI. Basically, I have 2 columns where I display the fields and buttons, like this:

The code is this one:
(NOTE: I’ve added borders to each column to help you see them. Also, I’m using Smarty templates)

<div class="ui equal height container grid">
    <div class="ui row">
      <div class="ui ten wide column" style="border: 1px solid green">
        {include file="form/left-column.tpl"}
      </div>

      <div class="ui six wide column" style="border: 1px solid blue">
        <div class="ui grid">
          <div class="ui sixteen wide middle aligned column" >
            {include file="form/right-column.tpl"}
          </div>
        </div>
      </div>
    </div>
  </div>

The second column has a grid with a column with ‘middle aligned’ class, but it doesn’t work. What could I try?
Thanks!