Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/facebook/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何使报价图标居中并分隔行_Html_Css - Fatal编程技术网
Fatal编程技术网
  • html/
  • Html 如何使报价图标居中并分隔行

Html 如何使报价图标居中并分隔行

html css

Html 如何使报价图标居中并分隔行,html,css,Html,Css,我需要用css来编写这个东西，所以我有点卡住了 我的代码如下所示： .quotation { @extend .col-lg-12; color:#d8b063; font-style: italic; text-align: center; border-top: 1px solid #d8b063; border-bottom: 1px solid #d8b063;

我需要用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;
         }
        
      }



转折点是一个神奇的时刻，当一个想法、趋势或社会行为跨过一个门槛，像野火一样蔓延开来。Malcolm Gladwell


您以前是否尝试过使用
伪元素


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

  }