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

• 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

1 Answer 1

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>