html - CSS text inside anchor tag seems slightly off center on IOS - Stack Overflow

admin管理员组

文章数量:1221393

I've recently started my CSS journey and I'm currently working on my first project for a friend. While testing I noticed my text inside my anchor tag was slightly off center, see comparison below.

The left is on Chrome, the right on IOS

Though it's hard to see, the spacing underneath the text in IOS is bigger than above.

I've tried text-size-adjust: none and resetting the line-height, but neither seem to work for me.

Any Ideas?

* {
    margin: 0;
    padding: 0;
    font: inherit;
    text-size-adjust: none;
}

a {
    text-decoration: none;
    line-height: 1;
    color: black;
    display: flex;
    align-items: center;
    gap: .75rem; /* The gap between the text and the arrow-icon. */
    border: 1px solid black;
    border-radius: 10rem;
    padding: 1rem 1.25rem;
}

<a href="">Read Our Story <span>→</span></a>

I've recently started my CSS journey and I'm currently working on my first project for a friend. While testing I noticed my text inside my anchor tag was slightly off center, see comparison below.

The left is on Chrome, the right on IOS

Though it's hard to see, the spacing underneath the text in IOS is bigger than above.

I've tried text-size-adjust: none and resetting the line-height, but neither seem to work for me.

Any Ideas?

* {
    margin: 0;
    padding: 0;
    font: inherit;
    text-size-adjust: none;
}

a {
    text-decoration: none;
    line-height: 1;
    color: black;
    display: flex;
    align-items: center;
    gap: .75rem; /* The gap between the text and the arrow-icon. */
    border: 1px solid black;
    border-radius: 10rem;
    padding: 1rem 1.25rem;
}

<a href="">Read Our Story <span>→</span></a>

• html
• css
• ios
• spacing
• line-height

Share Improve this question Follow edited Feb 7 at 9:07 mplungjan 178k2828 gold badges180180 silver badges240240 bronze badges asked Feb 7 at 8:47 Itsjul1anItsjul1an 32111 gold badge22 silver badges1313 bronze badges 1

• I made you a snippet. Please edit and add whatever relevant CSS is needed to show the button like your image – mplungjan Commented Feb 7 at 8:59

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I read the following on the net:

• iOS uses different text baseline alignment compared to other browsers.
• Flexbox doesn’t perfectly center inline text elements when their font has built-in vertical offsets.
• Different fonts have different built-in ascender/descender values, and iOS may render those slightly differently.

Can you try these changes?

* {
    margin: 0;
    padding: 0;
    font: inherit;
    text-size-adjust: none;
}

a {
    text-decoration: none;
    color: black;
    display: inline-flex; /* Fix iOS flex alignment */
    align-items: center;
    gap: .75rem; /* The gap between the text and the arrow-icon. */
    border: 1px solid black;
    border-radius: 10rem;
    padding: 1rem 1.25rem;
    line-height: normal; /* Fix text baseline alignment */
    vertical-align: middle; /* Centers inside flex */
}

/* Optional iOS fix */
@supports (-webkit-touch-callout: none) {
  a {
    position: relative;
    top: -0.1rem;
  }
}

<a href="">Read Our Story <span>→</span></a>

本文标签： htmlCSS text inside anchor tag seems slightly off center on IOSStack Overflow