使用具体化 CSS 对齐按钮旁边的文本答案

【问题标题】：Aligning text next to a button with materialize CSS使用具体化 CSS 对齐按钮旁边的文本
【发布时间】：2015-03-11 15:17:56
【问题描述】：

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

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

【问题讨论】：

... 按钮的 CSS 在哪里？我们怎么知道高度等？
我认为您需要提供更多代码才能使我们能够复制图像。只要它们是inline 或inline-block，将vertical-align: middle; 添加到button 和span 可能会起作用。

标签： html css alignment materialize

【解决方案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;
}

【讨论】：

【解决方案2】：

尝试使用：

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

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

【讨论】：

【解决方案3】：

对于希望将按钮和链接居中的任何人，都可以使用以下 sn-p：

<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 类将垂直对齐子元素，但它会删除它们之间的间距，这就是我们需要添加 margin-left 的原因> 在跨度孩子上。

【讨论】：

【解决方案4】：

在不了解完整CSS的情况下，我怀疑您需要垂直对齐按钮和跨度..例如：

button, span {
    vertical-align: middle;
}

【讨论】：

【解决方案5】：

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

CSS：

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

【讨论】：