如何在语义 ui 中将 2 个块居中对齐？

Question

对于我的项目（语义 ui），我想对齐 2 个块。两个块都应显示在页面的水平中心。块 1 的宽度并不重要，因为它是一个小块。块 2 应为 12 列宽。我该怎么做？

块 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>

区块 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>

完整代码：

<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 和块 2 设置一个公共 div
申请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;
}

如何在语义 ui 中将 2 个块居中对齐？

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

html

css

semantic-ui

html:

css: