Question

我再次陷入“基础”，无论如何，我在制作这个例子时遇到了麻烦：

基本上我想要图标和“特征1”在图片上方（青色线条）上方对齐并居中，然后在它们下方随机段落。

<body>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="top-align text-center">
            <i class="fa fa-paper-plane-o"></i>
            <h3>We're Creative</h3>            
            </div>
            <p class="text-center">Lorem ipsum dolor sit amet<br>
            Lorem ipsum dolor sit amet<br>
            Lorem ipsum dolor sit amet<br>
            Lorem ipsum dolor sit amet</p> 
        </div>
    </div>
</div>    


</body>

CSS3

.top-align{

display:inline;

}

所以，我的想法是制作图标和“功能1”段落为“内联”，所以我为这两件事（图标和段落）制作了自定义css和单独的div标签，但不幸的是它不会工作，这里是现场版如果有人有兴趣

http://i1cevic.com

Answer 1

我注意到你正在使用Bootstrap和Font Awesome，所以我的小提琴反映了这一点。

https://jsfiddle.net/Vuice/Ljkoatog/

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="text-center">
          <i class="fa fa-paper-plane-o"></i>
          <h3 style="display:inline;">We're Creative</h3>
        </div>
        <p class="text-center">Lorem ipsum dolor sit amet<br>
          Lorem ipsum dolor sit amet<br>
          Lorem ipsum dolor sit amet<br>
          Lorem ipsum dolor sit amet</p>
      </div>
    </div>
  </div>
</body>

Answer 2

您的包装器div不需要显示：内联。内联元素将呈现为好像它是单词中的字母 - 每个字符都是内联元素。 <span>默认显示：内联 - 它占用该行的下一个可用空间。

一旦包装器div.top-align显示：inline removed，给h3一个内联或内联块的显示属性。要么会这样做。这将允许图标和h3像两个相邻的单词一样工作，它们将响应由包装器div应用的text-align：center。

更好的是，您可以在图标+ h3周围没有包装div的情况下完成此操作。该图标默认为内联块的显示。将该图标的跨度放在h3中，它将始终呈现为单个单元，就像图标是h3中的单词一样。由于图标包含在跨度中，因此您仍可以根据需要单独定位。这是一个小提琴，说明如何： Making your icon an integral part of your heading （我从你的代码开始，并注释掉了不再适用的内容，这样你就可以看到进展。）

在.row中对齐图标和文本的垂直中心

2 个答案: