html - 使用具体化 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

这是由 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 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;
}

需要注意的是，使用 Materialize valign-wrapper类将垂直对齐子元素，但它会删除它们之间的间距，这就是我们需要在 span 子元素上添加margin-left的原因。

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)*
    }