如何在table-cell父div中对齐子div中的文本

Question

我有一个具有display: table;属性的父div。在里面，我有一个display: table-cell;属性的子div。

问题是第二个div内部的div有一个文本，即使拥有属性text-align: center;之后，它也没有将文本与中心对齐。

HTML：

<div class="hometab" id="groupList">
    <div ng-repeat="group in groupsData">
      <div class="groupButton"
            ng-style="{'background-color':'#'+group.color}">
            {{group.name}}
      </div>
    </div>
  </div>

CSS：

.hometab{
  z-index:10;
  position:fixed;
  width: 100%;
  top:100%;
  transform: translateY(-100%);
  height:10vh;
  overflow: auto;
  white-space: nowrap;
  display: table;
  border-collapse: collapse;
  table-layout: fixed;
  border-spacing: 10px;
  border-collapse: separate;

  background-color: #ebebeb;
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s; /* Firefox < 16 */
  -ms-animation: fadein 1s; /* Internet Explorer */
  -o-animation: fadein 1s; /* Opera < 12.1 */
  animation: fadein 1s;
}

.hometab > div {
  display: table-cell;
}

.groupButton{
    text-align: center;
  vertical-align: middle;
    color: white;
  font-family: "Roboto";
    font-size: 20px;
    height: 100%;
  font-style: regular;
  border: 3px ;
  border-radius: 15px;
  -o-border-radius: 15px;
  -moz-border-radius: 15px;
  -icab-border-radius: 25px;
  -khtml-border-radius: 25px;
  -webkit-border-radius: 15px;
}

ScreenSHOT：

扩展HTML：http://pastebin.com/PQqmxmsu

基本上我的 vertical-align: middle; 无效。如果我删除了height属性，那么它就会开始工作。

Answer 1

必须要打断你的风格。查看浏览器的检查器。并且您的代码正常工作

* {
  padding: 0;
  margin: 0;
}
.hometab {
  z-index: 10;
  position: fixed;
  width: 100%;
  top: 100%;
  transform: translateY(-100%);
  height: 10vh;
  overflow: auto;
  white-space: nowrap;
  display: table;
  border-collapse: collapse;
  table-layout: fixed;
  border-spacing: 10px;
  border-collapse: separate;
  background-color: rgba(0, 0, 0, .1);
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
}
.hometab > div {
  display: table-cell;
  background-color: rgba(0, 0, 0, .1);
  text-align: center;
}
.groupButton {
  text-align: center;
  vertical-align: middle;
  color: black;
  font-family: "Roboto";
  font-size: 20px;
  height: 100%;
  font-style: regular;
  border: 3px;
  border-radius: 15px;
  -o-border-radius: 15px;
  -moz-border-radius: 15px;
  -icab-border-radius: 25px;
  -khtml-border-radius: 25px;
  -webkit-border-radius: 15px;
  background-color: rgba(0, 0, 0, .1);
  display: inline-block;
  padding: 0 1em;
}

<div class="hometab" id="groupList">
  <div>
    <div class="groupButton">
      Lorem ipsum
    </div>
    <div class="groupButton">
      Lorem ipsum
    </div>
    <div class="groupButton">
      Lorem ipsum
    </div>
  </div>
</div>