无法在HTML中将文本向上移动

Question

我可能睡眠不足，错过了一些简单的东西。我尝试了所有可用的边距和填充，但我无法将包含一些文本的（div或任何其他文本包含元素）提升到正确的水平。

有什么最好的方法来实现这个目标？在下面的fiddle中，我想将它与font-awesome图标对齐。

.add-cohorts-button > a > i {
    padding-top: 5px;
}

.add-cohorts-button > span {
    padding-left: 8px;
    /*any amount of bottom margin/padding doesn't work. Try it. Height didn't either */
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="col-xs-3 add-cohorts-button">
  <a href="addcohort.form"><i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
  <span>Hello from the other side </span></a>
</div>

解决这个问题的方法？

- gabbar0x

Answer 1

使用display: inline-block将您的链接设置为内联块，以便其高度适应其内容，然后使用vertical-align: middle，就像这样：

.add-cohorts-button a {
  display: inline-block;
}

.add-cohorts-button > * {
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="col-xs-3 add-cohorts-button">
  <a href="addcohort.form"><i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i></a>
  <span>Hello from the other side </span>
</div>

版本，整个东西作为链接：

.add-cohorts-button {
  text-decoration: none;
}

.add-cohorts-button i {
  display: inline-block;
}

.add-cohorts-button > * {
  vertical-align: middle;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<a class="col-xs-3 add-cohorts-button" href="addcohort.form">
  <i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
  <span>Hello from the other side </span>
</a>

- Maximillian Laumeister

---

抱歉回复晚了。实际上我想要链接整个东西（图标+文本）。我已经相应地更改了代码。 - gabbar0x

@bholagabbar 我的回答中添加了一个新版本。 - Maximillian Laumeister

Answer 2

这适合你吗？

根据您的图标高度调整边距。

.add-cohorts-button > a > i {
    padding-top: 5px;
}

.add-cohorts-button span {
      position:absolute;
      padding-left:8px;
      margin-top:10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="col-xs-3 add-cohorts-button">
  <a href="addcohort.form"><i class="fa fa-plus-square-o fa-2x" aria-hidden="true"></i>
  <span>Hello from the other side </span></a>
</div>

- sam

---

这个好使。谢谢！或许你想删除你之前的回答。 - gabbar0x