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

Question

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

基本上，我希望 or 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

试试这个建议使用绝对定位

CSS:

.alternate-option {
            position:absolute;
            left:numeric value*(adjust according screen size)*
            top:numeric value*(adjust according screen size)*
    }

Answer 2

尝试使用：

.alternate-option {
  margin-left: 20px;
  vertical-align: baseline;
  position: relative;
  top:-5px;
}

另请参阅：http://www.w3schools.com/cssref/pr_class_position.asp

Answer 3

不知道完整的CSS，我怀疑你需要垂直对齐按钮和跨度..如：

button, span {
    vertical-align: middle;
}

Answer 4

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

margin-bottom: 15px;

Mousa Dirksz 的替代解决方案是删除按钮的默认边距：

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;
}

Answer 5

对于希望将按钮和 link 居中的任何人，可以使用以下代码段：

<div class="valign-wrapper">
  <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>

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

重要的是要注意，使用 Materialize valign-wrapper class 将垂直对齐子元素，但它会删除它们之间的间距，这就是为什么我们需要添加一个margin-left 在 span children.

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

Aligning text next to a button with materialize CSS

html

css

alignment

materialize