将顶部填充添加到字体真棒图标

Question

我正在尝试仅将一些顶部填充添加到字体真棒图标，但如果我将padding-top:10px或margin-top:10px设置为i元素，它还会向文本添加填充在它之前。

有人可以帮忙吗？

jsFiddle

i {
  font-size: 30px;
  padding-top: 10px;
}
.block {
  background-color: #ccc;
  padding: 10px;
  max-width: 400px;
  text-align: center;
}
.block-number {
  background-color: #000;
  color: #fff;
  padding: 10px;
  display: inline-block;
  font-size: 20px;
}

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="block">
  <div class="block-number">2 to 4</div>
  <i class="fa fa-large fa-camera-retro"></i>
</div>

Answer 1

由于.block-number和字体很棒的<i>元素都设置为内嵌块，因此vertical-align会生效，您可以将默认值从baseline更改为{ {1}}等等。

top

使用.block-number, i { ... vertical-align: top; } i { ... padding-top: 10px; } 和position分别调整top元素还有另一种方法。

<i>

Answer 2

我不确定是否可以使用其他方法来实现，但我要做的就是绝对定位图标。

＆＃13;

＆＃13;

i {
  font-size:30px;
  position: absolute;
  padding-top: 8px;
  padding-left: 10px;
}

.block {
  background-color:#f1f1f1;
  padding:10px;
  max-width:400px;
  text-align:center;
  position: relative;
}

.block-number {
  background-color:#000;
  color:#fff;
  padding:10px;
  display:inline-block;
  font-size:20px;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="block">
  <div class="block-number">
    2 to 4
  </div>
  <i class="fa fa-large fa-camera-retro"></i>
</div>

＆＃13;

＆＃13;

＆＃13;

我还没有得到您的答案，但如果您只是想垂直居中文字和图标，请使用以下代码：

＆＃13;

＆＃13;

i {
  font-size:30px;
}

.block {
  background-color:#f1f1f1;
  padding:10px;
  max-width:400px;
  text-align:center;
}

.block-number {
  background-color:#000;
  color:#fff;
  padding:10px;
  display:inline-block;
  font-size:20px;
}

.block > * {
  vertical-align: middle;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="block">
  <div class="block-number">
    2 to 4
  </div>
  <i class="fa fa-large fa-camera-retro"></i>
</div>

＆＃13;

＆＃13;

＆＃13;