The issue I am facing involves a parent div with the CSS property display: table;. Nested inside is a child div with display: table-cell;.
Despite applying text-align: center;, the text within the second div does not align to the center as expected.
Here's the HTML snippet:
<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>
And here is the corresponding CSS code:
.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;
}
My challenge lies in getting the vertical-align: middle; property to function properly. Strangely enough, removing the height attribute seems to resolve the issue.