Question

我正在尝试对齐包含图标和一些文本的垂直块。一切都按预期工作，直到文本对于块太大。

＆＃13;

.big-icons .big-icon {
  font-size: 42px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 3.2em;
}
.big-icons .big-icon a .text {
  font-size: 18px;
  position: relative;
  text-transform: uppercase;
  top: 3em;
  white-space: nowrap;
}
.big-icons .big-icon a {
  font-weight: 300;
  text-decoration: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="big-icons">

  <span class="big-icon">
    <a target="_blank" href="#">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-magic fa-stack-1x fa-inverse"></i>
        <span class="text">Short title</span>
      </span>
    </a>
  </span>
  <div class="visible-xs divider"></div>

  <span class="big-icon">
    <a target="_blank" href="#">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-area-chart fa-stack-1x fa-inverse"></i>
        <span class="text">Very long long text</span>
      </span>
    </a>
  </span>
  <div class="visible-xs divider"></div>

  <span class="big-icon">
    <a target="_blank" href="#">
      <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-dropbox fa-stack-1x fa-inverse"></i>
        <span class="text">Title</span>
      </span>
    </a>
  </span>
  <div class="visible-xs divider"></div>

</div>

＆＃13;

如何制作包含文字的链接＆＃34;很长的文字＆＃34;与文本不相交＆＃34;标题＆＃34;在右边？

Answer 1

似乎fa-stack-1x类提供了图标position:absolute，这就是为什么它没有正确居中。我会尝试使用fa只是为了呈现一定大小的图标，并在我自己的CSS中做其他事情。边界半径，自己的位置等的圆圈。

垂直放置Font Awesome图标

1 个答案: