无法在HTML中向上移动文本

2019年7月21日 215次阅读

我可能真的很困,在这里很容易丢失一些东西.我已经尝试了每个边距和填充,但我无法提升包含一些文本到正确级别的跨度(div或任何其他包含该元素的文本).

实现这一目标的最佳方法是什么？在下面的小提琴中,我想将它与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>

解决这个问题的方法？

最佳答案 适合你吗？

根据图标高度调整边距.

.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>
点赞