Struggling to align text inside an element styled with display: table-cell? The issue arises when dealing with multiline text in a tab format. Achieving the correct vertical-align: middle; requires displaying it as a table-cell, which works well in most cases but not here.
Upon initial loading on Chrome, the alignment appears off-center as shown.
An interesting observation is that by altering the line-height from 1 to 2 and back to 1 using dev tools, the display aligns correctly, as depicted:
However, changing the line-height to 0 and then back to 1 results in this output:
Is there a way to ensure proper alignment upon page load? Could this be a known issue specific to Chrome, given that it displays fine in Firefox?
Below is the CSS styling for the tab:
.tab-controller__item {
display: inline-table;
border-radius: 6px 6px 0 0;
margin-right: 6px;
position: relative;
overflow: hidden;
vertical-align: middle;
background-color: #717171;
}
.tab-controller__item__link {
color: #fff;
text-decoration: none;
text-transform: uppercase;
padding: 0 2em;
display: table-cell;
line-height: 1;
height: 48px;
vertical-align: middle;
position: relative;
}
The HTML structure is simple:
<a class="tab-controller__item__link" href="#">
<span class="icon-star"></span>Campaign<br>& Bonus
</a>