我可能真的很困,在这里很容易丢失一些东西。我已经尝试了每个边距和填充,但我无法提升 span
(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>
&#13;
摆脱这个问题吗?
答案 0 :(得分: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>
答案 1 :(得分:1)
这适合你吗?
根据图标高度调整边距。
.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>