html - CSS: Lining::before content to middle of element

Question

我正在尝试制作一个程式化的“引号”元素，并希望在元素的顶部中间自动插入引号图标。

问题是我无法让图标在中间对齐，尤其是在调整浏览器大小时。此外，pullquote 内容的开头太靠右了，因为它为 ::before 图标留出了空间，即使它位于其他位置也是如此。

.pullquote {
	padding: 1em;
	text-align: center;
  border-top: 2px dashed #ccc;
	border-bottom: 4px solid #ccc;
}
.pullquote::before {
	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">
	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">
	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>