How to align 2 blocks in the center in semantic ui?

Question

For my project (semantic ui) I want to align 2 blocks. Both blocks should be displayed in the horizontal center of the page. Block 1's width is not important since its a small block. Blocks 2 should be 12 columns wide. How can I do this?

Block 1:

<img class="ui small circular image" src="images/large/stevie.jpg">
<h1>Stevie Wonder</h1>
<p><a href="#">@stevie</a></p>
<p>Amsterdam, The Netherlands</p>
<button class="ui button">Edit Profile</button>

Block 2:

<div class="ui top attached tabular menu">
    <div class="active item">My Bla's</div>
    <div class="item">Favorite Bla's</div>
</div>
<div class="ui bottom attached tab segment">
    <div class="ui divided items">
        <div class="item">
            <div class="image">
                <img src="/images/wireframe/image.png">
            </div>
            <div class="content">
                <a class="header">12 Years a Slave</a>
                <div class="meta">
                    <span class="cinema">Union Square 14</span>
                </div>
                <div class="description">
                    <p></p>
                </div>
                </div>
            </div>
        </div>              
    </div>
</div>

Full code:

<div class="ui main container">
      <div class="row">
        <div class="column">
          <img class="ui small circular image" src="images/large/stevie.jpg">
          <h1>Stevie Wonder</h1>
          <p><a href="#">@stevie</a></p>
          <p>Amsterdam, The Netherlands</p>
          <button class="ui button">Edit Profile</button>
        </div>
      </div>
      <div class="row">
        <div class="column">
          <div class="ui top attached tabular menu">
            <div class="active item">My Bla's</div>
            <div class="item">Favorite Bla's</div>
          </div>
          <div class="ui bottom attached tab segment">
            <div class="ui divided items">
              <div class="item">
                <div class="image">
                  <img src="/images/wireframe/image.png">
                </div>
                <div class="content">
                  <a class="header">My Neighbor Totoro</a>
                  <div class="meta">
                    <span class="cinema">IFC Cinema</span>
                  </div>
                  <div class="description">
                    <p></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

1. make one common div for block1 and block 2
2. apply css.

html:

<div class="main">
<div class="block1">---</div>
<div class="block2">---</div>
</div>

css:

.main
{
   width:suitable size(block1+block2) in pixel
   margin:0 auto;
}
.block1
{
width:block1's width;
float:left;
}
.block2
{
width:block2's width;
float:right;
}