0

我一直在为这两个按钮绞尽脑汁。对于我的一生，我似乎无法正确对齐它们。

你可以在这里看到它们https://mrpbennett.com

我通常通过使用 flexbox 和对齐中心来做到这一点。似乎推特按钮有点奇怪。我试图从 twitter 按钮所在的 iframe 中删除底部的边距。

<div className={homeStyles.followBtns}>
                    <GitHubButton
                        href="https://github.com/mrpbennett"
                        data-color-scheme="no-preference: light; light: light; dark: dark;"
                        data-size="large"
                        aria-label="Follow @mrpbennett on GitHub"
                    >
                        Follow
                    </GitHubButton>

                    <TwitterFollowButton
                        screenName={'mrpbennett'}
                        options={{
                            size: 'large',
                            showScreenName: 'false',
                            showCount: 'false',
                        }}
                    />
                </div>

.follow-btns {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;

    :first-child {
        margin-right: 0.5rem;
    }
}

iframe {
    margin: 0;
    padding: 0;
}

这就是我尝试过的方式。但是 Twitter 按钮似乎并不想对齐....有什么想法吗？

4

1 回答 1

0

你可以试试这个：

follow-btns : {
       display : 'flex';
       margin-bottom: 1rem;
       align-items: 'baseline';
    }

其他一切都和你写的一样。

于 2019-10-12T14:15:53.207 回答