CSS：Lining ::在內容到元素中間之前

Question

我正在試圖製作一個程式化的「引用」元素，並且想要在元素的頂部中間自動插入引號圖標。

問題是，我無法讓圖標排列在中間，特別是當瀏覽器調整大小時。此外，pullquote內容的起始位置偏離右側，因爲即使位於其他位置，它也會爲::before圖標留出空間。

.pullquote { 
 
\t padding: 1em; 
 
\t text-align: center; 
 
    border-top: 2px dashed #ccc; 
 
\t border-bottom: 4px solid #ccc; 
 
} 
 
.pullquote::before { 
 
\t content: "\f10d"; 
 
    font-family: FontAwesome; 
 
    font-size: 1.4em; 
 
    color: #acacac; 
 
    top: -1.3em; 
 
    left: 50%; 
 
    background: #fff; 
 
    padding: 0 0.6em; 
 
    position: relative; 
 
}

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' /> 
 

 
<p>Lorem ipsum dolor sit amet, tibique fastidii ea duo, habeo conceptam ut mea. Esse dicant veritus no ius, lorem iuvaret has cu. Vis at fuisset accusata voluptaria, no unum facer epicurei usu. In ius suas latine offendit. Wisi consequat ea has, id modus aliquid scripserit est. Cu ignota civibus vel, sed diam oratio nusquam ad.</p> 
 

 
<div class="pullquote"> 
 
\t This is an amazing quote from someone. 
 
</div> 
 
\t \t 
 
<p>Lorem ipsum dolor sit amet, tibique fastidii ea duo, habeo conceptam ut mea. Esse dicant veritus no ius, lorem iuvaret has cu. Vis at fuisset accusata voluptaria, no unum facer epicurei usu. In ius suas latine offendit. Wisi consequat ea has, id modus aliquid scripserit est. Cu ignota civibus vel, sed diam oratio nusquam ad.</p>

Answer 1

要將報價居中，請將其相對於父級進行絕對定位，並使用left: 50%;將報價從左側的50％放置到top: 0;以使其與拉動報價的頂部齊平，並使用translate(-50%,-50%);將其移動到其自身寬度的一半左上並將其居中並橫向拉動報價的頂部。

.pullquote { 
 
    padding: 1em; 
 
    text-align: center; 
 
    border-top: 2px dashed #ccc; 
 
    border-bottom: 4px solid #ccc; 
 
    position: relative; 
 
} 
 
.pullquote::before { 
 
    content: "\f10d"; 
 
    font-family: FontAwesome; 
 
    font-size: 1.4em; 
 
    color: #acacac; 
 
    top: 0; 
 
    left: 50%; 
 
    background: #fff; 
 
    padding: 0 0.6em; 
 
    position: absolute; 
 
    transform: translate(-50%,-50%); 
 
}

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' /> 
 

 
<p>Lorem ipsum dolor sit amet, tibique fastidii ea duo, habeo conceptam ut mea. Esse dicant veritus no ius, lorem iuvaret has cu. Vis at fuisset accusata voluptaria, no unum facer epicurei usu. In ius suas latine offendit. Wisi consequat ea has, id modus aliquid scripserit est. Cu ignota civibus vel, sed diam oratio nusquam ad.</p> 
 

 
<div class="pullquote"> 
 
\t This is an amazing quote from someone. 
 
</div> 
 
\t \t 
 
<p>Lorem ipsum dolor sit amet, tibique fastidii ea duo, habeo conceptam ut mea. Esse dicant veritus no ius, lorem iuvaret has cu. Vis at fuisset accusata voluptaria, no unum facer epicurei usu. In ius suas latine offendit. Wisi consequat ea has, id modus aliquid scripserit est. Cu ignota civibus vel, sed diam oratio nusquam ad.</p>

Answer 2

所有你需要設置position到absolute，使左邊距一半width的負值，試試這個更新片段：

.pullquote { 
 
    padding: 1em; 
 
    text-align: center; 
 
    border-top: 2px dashed #ccc; 
 
    border-bottom: 4px solid #ccc; 
 
    position: relative; 
 
} 
 
.pullquote::before { 
 
    content: "\f10d"; 
 
    font-family: FontAwesome; 
 
    font-size: 1.4em; 
 
    color: #acacac; 
 
    top: -0.5em; 
 
    left: 50%; 
 
    margin-left: -0.7em; 
 
    background: #fff; 
 
    padding: 0 0.6em; 
 
    position: absolute; 
 
}

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' type='text/css' media='all' /> 
 

 
<p>Lorem ipsum dolor sit amet, tibique fastidii ea duo, habeo conceptam ut mea. Esse dicant veritus no ius, lorem iuvaret has cu. Vis at fuisset accusata voluptaria, no unum facer epicurei usu. In ius suas latine offendit. Wisi consequat ea has, id modus 
 
    aliquid scripserit est. Cu ignota civibus vel, sed diam oratio nusquam ad.</p> 
 

 
<div class="pullquote"> 
 
    This is an amazing quote from someone. 
 
</div> 
 

 
<p>Lorem ipsum dolor sit amet, tibique fastidii ea duo, habeo conceptam ut mea. Esse dicant veritus no ius, lorem iuvaret has cu. Vis at fuisset accusata voluptaria, no unum facer epicurei usu. In ius suas latine offendit. Wisi consequat ea has, id modus 
 
    aliquid scripserit est. Cu ignota civibus vel, sed diam oratio nusquam ad.</p>