Question

I have a layout composed of divs displaying as table, 3 table rows, and up to 5 table cells per row. My problem is twlofold:
1) I can’t figure out how to center the table cells within the rows if there are less than five cells in the table., and
2) I can’t figure out how to keep the integrity of the shapes when there are less than 5 in a row.

The number of cells in a row will be variable (between 3 and 5), and I have to use divs — I can’t use real tables.

Here is a codepen: http://codepen.io/Jaemaz/full/aCboe

Here is the source:

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;
}

Screen Shot:

Answer 1

Building on @Jojje ‘s suggestion, the answer lies in creating an extra “inner” level (display:table) within the div structure. Solution is on CodePen here: http://codepen.io/Jaemaz/pen/spbKf

In case Codepen goes away, here is sample HTML and CSS:

HTML

<div class="focus-container">
  <div class="focus-row">
    <div class="inner">
      <div class="focus-element circle">
        <span>ahem</span>
      </div>
    </div>
  </div>
  <div class="focus-row">
    <div class="inner">
      <div class="focus-element circle">
        <span>hello</span>
      </div>
      <div class="focus-element circle">
        <span>there</span>
      </div>
    </div>
  </div>
  <div class="focus-row">
    <div class="inner">
      <div class="focus-element circle">
        <span>what</span>
      </div>
      <div class="focus-element circle">
        <span class="content">is</span>
      </div>
      <div class="focus-element circle">
        <span>happening</span>
      </div>
      <div class="focus-element circle">
        <span>happening</span>
      </div>
      <div class="focus-element circle">
        <span>happening</span>
      </div>
    </div>
  </div>
</div>

CSS

.focus-container {
  width: 560px;
  background-color: #000;
  padding: 5px;
}

.focus-container .focus-row {
  height: 110px;
  background-color: #000
}

.focus-container .focus-row .inner {
  display: table;
  margin: 0 auto;
  height: 110px;
}

.focus-container .focus-row .inner .focus-element {
  float: left;
  text-align: center;
  margin: 0 auto;
  width: 94px;
  height: 94px;
  background-color: #009900;
}

.focus-container .focus-row .inner .focus-element span {
  margin-top: 40px;
  display: block;
}

.focus-container .focus-row .inner .circle {
  -moz-border-radius: 94px;
  -webkit-border-radius: 94px;
  border-radius: 94px;
  margin: 8px;