CSS：Lining ::要素の真ん中までのコンテンツ

Question

私は、書式化された "quote"要素を作成しようとしており、要素の最上部の中央に自動的に引用アイコンを挿入したいと考えています。

問題は、特にブラウザのサイズを変更したときに、アイコンが真ん中に並ぶことができないことです。また、pullquoteのコンテンツの始めは、他の場所に配置されているにもかかわらず、::beforeアイコンのためのスペースが残っているため、右端から離れすぎて開始されます。

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

：

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

あなたはpositionabsoluteに設定し、左余白に半分widthの負の値を作るために必要なすべての

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

、この更新されたスニペットを試してみてください