Question

我正在Angular 8应用程序中设计“关于”页面。我正在使用很棒的字体和Bootstrap 4。

真棒字体无法使用引导程序正确居中（对齐）。如果有人可以指导，这是我的代码！

<!--==========================
  About Us Section
============================-->

<section id="about">
  <div class="container">
    <header class="section-header">

      <h3 *ngIf="!showSpanish">About Us</h3>
      <h3 *ngIf="showSpanish">Sobre nosotros</h3>
      <p *ngIf="!showSpanish">
        Here goes Description!
      </p>
      <p *ngIf="showSpanish">
        ¡Aquí va la descripción de!
      </p>
      <div class="input-group">
        <button class="btn btn-primary p-1 mr-1" (click)="useLanguage('en')" type="button">English</button>
        <button class="btn btn-success  p-1 ml-1" (click)="useLanguage('es')" type="button">Espaniol</button>
      </div>

    </header>
    <div class="row about-cols">
      <div class="col-md-4 mb-5 bg-white rounded">
        <div class="about-col">
          <div class="img">
            <img src="http://.../img/SV01.jpg" alt="" class="img-fluid">

            <div class="icon"><i class="fas fa-tachometer-alt"></i></div>

          </div>
          <h2 class="title" *ngIf="!showSpanish">Background</h2>
          <h2 class="title" *ngIf="showSpanish">Antecedentes</h2>
          <p *ngIf="!showSpanish">
            What is a Plan?
            Some text
          </p>
          <p *ngIf="showSpanish">
            What is a Plan?
            Some text in spanish
          </p>
        </div>
      </div>
      <div class="col-md-4 shadow-lg p-3 mb-5 bg-white rounded" data-wow-delay="0.1s">
        <div class="about-col">
          <div class="img">
            <img src="http://.../Content/img/SV02.png" alt="" class="img-fluid">

            <div class="icon"><i class="fas fa-book-open"></i></div>
          </div>
          <h2 class="title" *ngIf="!showSpanish">What We Do?</h2>
          <h2 class="title" *ngIf="showSpanish">Que hacemos</h2>

          <p *ngIf="!showSpanish">
            Some text
          </p>
          <p *ngIf="showSpanish">
            some text
          </p>
        </div>
      </div>
      <div class="col-md-4 shadow-lg p-3 mb-5 bg-white rounded" data-wow-delay="0.2s">
        <div class="about-col">
          <div class="img">
            <img src="http://.../Content/img/SV03.jpg" alt="" class="img-fluid">
            <div class="icon"><i class="fas fa-eye"></i></div>
          </div>
          <h2 class="title" *ngIf="!showSpanish">Our Mission and Vision</h2>
          <h2 class="title" *ngIf="showSpanish">Nuestra misión y visión</h2>
          <p *ngIf="!showSpanish">
            some text
          </p>
          <p *ngIf="showSpanish">
            Some text
          </p>
        </div>
      </div>
    </div>
  </div>
</section><!-- #about -->

例如，“ fas fa-tachometer-alt”不在“ bg-white rounded”的中心同样，“ fas fa-book-open”和眼睛未居中。

Answer 1

您已经在图标上设置了课程。

<div class="icon"><i class="fas fa-eye"></i></div>

只需在CSS中为图标类设置负的边距即可。该值可能只是一个整数，但是您需要尝试一下或通过检查器找出是哪个边距，填充或元素导致了移位。

类似的东西：

.icon {
    margin-left: -10px;
}

应该做到这一点

字体真棒图标与Bootstrap不对齐

1 个答案: