在 React 中对齐 GitHub 和 Twitter 按钮

Question

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

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

我通常通过使用弹性框和对齐中心来做到这一点。推特按钮似乎有点奇怪。我试图从推特按钮所在的 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按钮似乎不想对齐。有什么想法吗？

Answer 1

你可以试试这个：

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

其他一切都与您写的相同。