水平对齐列表元素及其中的相对div

Question

在过去的两个小时里，我一直试图水平对齐一个无序的卡片元素列表。

这是我的HTML：

  <div id="hand-list">
    <ul>
      <li>
        <card></card>
      </li>
      <li>
        <card></card>
      </li>
    </ul>
  </div>

这是我的CSS：

div#hand-list ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-width: 170px;
    float: left;
}

div#hand-list ul li {
    display: inline-block;
}

.card {
    position: relative;
    background: #e3e3e3;
    border-radius: 5px;
    cursor: pointer;
    width: 150px;
    height: 90px;
    box-shadow: 0 1px 1px;
}

我做错了什么？我只是让他们一直垂直堆叠？

从根本上讲，卡片如下（只是AngularJS的一小部分）：

<div class="card" shift>
    <div class="card-header">
        <h4>{{ user.firstName | limitTo:10 }} {{ user.lastName | limitTo:1 }}.</h4>
    </div>
    <div class="card-body">
    </div>
    <div class="card-footer">
        {{ user.label }}
    </div>
</div>