I'm currently facing an issue with vertically aligning the text within a button to the center. We are using Bootstrap buttons across different devices and platforms, and everything seems to be working fine except for one specific device where the alignment is off.
Here is how the button appears on Chrome and most other devices: Chrome, Chrome DevTools
And this is how it looks on our problematic device: Device, Device DevTools
The text in the button on our device appears slightly above the center. I have tried adjusting the line height, utilizing CSS reset and normalize techniques, as well as tweaking various other CSS properties, but unfortunately, none of them have succeeded in properly centering the text vertically.
Below are the overrides we have implemented for the button:
.btn {
font-family: $open-sans;
font-size: 14px;
font-weight: bold;
border-color: #cfcfcf;
text-transform: uppercase;
text-align: center !important;
}
The button code snippet:
<button type="button" class="btn">Close</button>
We also attempted using <a /> and <input> tags based on the documentation, but these methods did not resolve the issue:
<a class="btn" role="button">Close</a>
<input class="btn" type="button" value="Close">
A noticeable distinction I observed is that the text content within the element (highlighted in blue in DevTools) is aligned to the top on our problem device, whereas it is centered within the element on other browsers. Normalizing this alignment discrepancy has proven to be challenging.
In case it could provide any insights, the troublesome device utilizes Android System WebView version 74.0.3729.186.
EDIT:
Upon further examination of the DevTools screenshots, the issue does not pertain to aligning the inner content box centrally within the button, as it already appears correctly centered. The actual challenge lies in aligning the text properly within the content box. Adjusting the line-height property has been ineffective, as there still remains a gap beneath the text within the content box.
I initially suspected excessive internal padding within the font, however, changing the font did not yield different results.