テーブルセル親div内の子div内のテキストを整列する方法

Question

私はdisplay: table;プロパティを持つ親divを持っています。その中にはdisplay: table-cell;というプロパティを持つ子divがあります。

問題は、2番目の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; 
} 

スクリーンショット：

拡張HTML：http://pastebin.com/PQqmxmsu

基本的に私のvertical-align: middle;が機能しません。高さ属性を削除すると、作業が開始されます。

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>