css - 显示 :table row 内 div 的水平居中

Question

我有一个布局，由显示为表格的 div、3 个表格行和每行最多 5 个表格单元格组成。我的问题是双重的: 1)如果表格中的单元格少于五个，我无法弄清楚如何将表格单元格置于行的中心。，和 2) 当连续少于 5 个时，我不知道如何保持形状的完整性。

一行中的单元格数量是可变的(在 3 到 5 之间)，我必须使用 div——我不能使用真正的表格。

这是一个代码笔:http://codepen.io/Jaemaz/full/aCboe

这是来源:

HTML:

<div class="focus-container">
  <div class="focus-row">
    <div class="focus-element  circle">
      <span class="ng-scope">
        Option A
      </span>
      </div>
      <div class="focus-element  circle">
        <span class="ng-scope">
          Option B
        </span>
      </div>
      <div class="focus-element  circle">
        <span class="ng-scope">
          Option C
        </span>
      </div>
      <div class="focus-element  circle">
        <span class="ng-scope">
          Option D
        </span>
      </div>
      <div class="focus-element  circle">
        <span class="ng-scope">
          Option E
        </span>
      </div>
  </div>
  <div class="focus-row">
    <div class="focus-element  circle" ng-class="{unknown: unknown, square: square, circle: circle, selected: selected, shouldHaveBeenSelected: shouldHaveBeenSelected, shouldNotHaveBeenSelected: shouldNotHaveBeenSelected}" ng-click="click()" ng-transclude="" focuschoice="" identifier="F" enabled="true">
      <span class="ng-scope">
        Option F
      </span>
  </div>
  </div>
</div>

CSS:

.focus-container {
width: 560px;
height: auto;
display: table;
background-color: #000;
border-spacing: 15px;
table-layout: fixed;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}

.focus-row {
width: 100%;
height: 100%;
display: table-row;
}

.focus-element {
width: 90px;
height: 90px;
display: table-cell;
color: #fff;
background: #808080;
border: 2px solid #BFBFBF;
vertical-align: middle;
text-align: center;
font-family: "Ubuntu", Arial, Helvetica, sans-serif;
font-size: 14px;
text-shadow: 0px 2px 1px rgba(0, 0, 0, 1);
max-width: 94px;
}

.focus-element.circle {
-moz-border-radius: 94px;
-webkit-border-radius: 94px;
border-radius: 94px;
}

屏幕截图:

Answer 1

表格不会这样做，但表格中的表格会。 1) 在外部表中使用单个单元格行，在每个单元格中使用一个新表，并将内部表置于行中。 2) 您可以在内表中的每个单元格上使用固定的(或一些相对的)宽度和高度。

添加: 这将适用于 display:table 以及 old-school table。 最外层的表格每一行应该只有一个单元格，在那个单元格中放置内层表格。