如何以報價圖標爲中心分開

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-elementbefore？

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; 
    } 
    ... 

    }