我有一個(gè)不知道如何解決的問(wèn)題。在某些設(shè)備上，框中的文本不是垂直居中的。在我的電腦上，它是完美居中的，但在我的手機(jī)上，它有點(diǎn)高。這也是我的SCSS:

.single-size{
                text-align: center;
                a{
                    padding: 1rem;
                    font-size: 2rem;
                    display: block;
                    border: .1rem solid #D8D8D8;
                    &.active{
                        background-color: $secondary;
                        border: .1rem solid $secondary;
                        color: #fff;
                    }
                }
            }

和我的HTML:

<div class="single-size">
    <a href="#" class="attribute">XXL</a>
</div>

這是電腦上的一張圖片:

這是一張來(lái)自手機(jī)的圖片:

有人能解釋一下為什么會(huì)這樣嗎？

你需要將它們垂直對(duì)齊

.single-size{
                text-align: center;
                align-items: center;
                display: flex;
                a{
                    padding: 1rem;
                    font-size: 2rem;
                    display: block;
                    border: .1rem solid #D8D8D8;
                    &.active{
                        background-color: $secondary;
                        border: .1rem solid $secondary;
                        color: #fff;
                    }
                }
            }

并檢查錨定標(biāo)簽中空白，

賣出保證金:0；在錨標(biāo)記的css中