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

Question

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

基本上，我希望or Sign Up文字更高一些。我也在使用MaterialiseCSS。这是我的代码：

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

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

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

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

对于希望将按钮和链接置于中心位置的任何人，都可以使用以下代码段：

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

重要的是要注意使用Materialise valign-wrapper 类会垂直对齐子元素，但它会删除它们之间的间距，这就是我们需要添加<的原因跨栏儿童的强>边缘左侧。

Answer 4

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

button, span {
    vertical-align: middle;
}

Answer 5

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

---

CSS：

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