html - 使用 materialize CSS 对齐按钮旁边的文本

Question

我有一个按钮和它旁边的一些文本。我想将文本的垂直对齐方式与按钮的对齐方式相匹配。这是我现在拥有的:

基本上，我希望 或 Sign Up 文本稍微高一点。我也在使用 MaterializeCSS。这是我的代码:

HTML

<div class="center">
  <button class="btn waves-effect waves-green green darken-1">Sign In</button>
  <span class="alternate-option">or <a href="#">Sign Up</a></span>
</div>

CSS

.alternate-option {
  margin-left: 20px;
}

我试过使用 padding-bottom 和 margin-bottom。

Answer 1

这是由 MaterializeCSS 的按钮样式引起的:

margin-bottom: 15px;

Mousa Dirksz 的 span repositionning 的替代解决方案会是删除按钮的默认边距:

HTML

<div class="center">
    <div class="alternate-option">
        <button class="btn waves-effect waves-green green darken-1">Sign In</button>
        <span>or <a href="#">Sign Up</a></span>
    </div>
</div>

CSS

.alternate-option button {
    margin-bottom: 0px;
}    

.alternate-option span {
    margin-left: 20px;
}