如何居中引用图标分隔线

Question

我需要在css中编写这个东西，所以我有点卡住了。

我的代码看起来像这样：

      .quotation {
        @extend .col-lg-12;
        color:#d8b063;
        font-style: italic;
        text-align: center;
        border-top: 1px solid #d8b063;
        border-bottom: 1px solid #d8b063;
        padding: 50px 0;
        margin-bottom: 48px;


        blockquote {
          font-size: 22px;
          font-family: "Georgia", sans-serif;
          padding: 0;
          margin: 0;
          border: 0;
        }
        
        p {
          font-size: 17px;
          margin-top: 27px;
         }
        
      }
    <div class="quotation">
    <img><img src="/assets/quote.png" alt="Quote sign" /></img>
    <blockquote>The tipping point is that magic moment when an idea, trend, or social behavior crosses a threshold, tips, and spreads like wildfire.<p>Malcolm Gladwell</p></blockquote>
    </div>

我有一个问题如何向后拉图标，使其以第一行为中心并与行分开。 我想我可以做到这一点，比如保证金：-120px，但我现在不知道怎么做。

Answer 1

您是否尝试过使用pseudo-element before？

quotation {
    @extend .col-lg-12;
    color:#d8b063;
    font-style: italic;
    text-align: center;
    border-top: 1px solid #d8b063;
    border-bottom: 1px solid #d8b063;
    padding: 50px 0;
    margin-bottom: 48px;


    .quotation:before {
      content: url("/assets/quote.png");
      display: inline-block;
      height: 22px;
    }
    ...

  }