Bug 185131 - button text not centered
Summary: button text not centered
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: Safari 11
Hardware: iPhone / iPad Unspecified
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2018-04-30 08:12 PDT by davidmaxwaterman
Modified: 2018-05-01 01:45 PDT (History)
1 user (show)

See Also:

Screengrab from Chrome 65 on Linux (31.15 KB, image/png)
2018-05-01 00:28 PDT, David Millar
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description davidmaxwaterman 2018-04-30 08:12:47 PDT
Test case:


On mobile safari (on iOS 11.3.1), the text is slightly offset, as if its left side is centered, rather than its center.

On desktop safari and other platforms, it centered as expected.
Comment 1 David Millar 2018-05-01 00:28:11 PDT
Created attachment 339192 [details]
Screengrab from Chrome 65 on Linux

I believe this is expected behavior, as shown in the attached screengrab from Chrome 65 on Fedora Linux. When the text horizontally overflows the bounds of the element, text-align is thrown out the window.

In your case, I'm guessing the extra padding on iOS buttons caused you to run into the issue sooner than on desktop browsers. You should be able to work around that by explicitly removing the padding from your button.
Comment 2 davidmaxwaterman 2018-05-01 01:45:38 PDT
Yes, removing the padding works for me. I guess it was just because it only happens on iOS that threw me.

Anyway, thanks for the solution.

I guess this means this 'bug' is resolved/invalid, so marking as such.