如何解决引用伪元素在元素填充内不均匀对齐
我已经设置了blockquote
的样式,以通过CSS伪元素添加左引号和右引号,但是它们并没有在元素的填充内水平地平均居中,因此,右引号通常看起来离文本。在我的项目中,它们的分布略有不同,因此也有些不一致。我该如何解决/改善呢?
<div class="big-quote">
<blockquote>This is a styled quote.</blockquote>
</div>
.big-quote {
overflow: hidden;
padding: 0;
width: 30%;
}
.big-quote blockquote {
position: relative;
margin: 0.5em;
padding: 0.5em 2em 0.5em 2em;
text-align: center;
line-height: 1.25;
font-family: serif;
font-size: 2.444444444em;
font-style: italic;
}
.big-quote blockquote::before,.big-quote blockquote::after {
position: absolute;
line-height: 1;
font-size: 5em;
color: #adadad;
}
.big-quote blockquote::before {
content: "\201C";
top: 0;
left: 0;
}
.big-quote blockquote::after {
content: "\201D";
right: 0;
bottom: -0.5em;
float: right;
}
演示:https://codepen.io/ourcore/pen/bGerROL
解决方法
问题是引号放错了位置-这是由于blockquote占用了太多的宽度(即,不限于其文本的宽度),因此引号最终可能会偏离实际位置文字。
在此代码段中,我进行了一些更改-请参见代码中的注释。
.big-quote {
overflow: hidden;
padding: 0;
width: 60%;
text-align:center;
display: flex;
justify-content: center;
position:relative;
}
.big-quote blockquote {
position: relative;
margin: 0.5em;
padding: 0.5em 2.6em 0.5em 2.6em;/* increased to allow room for the quotes in the padding */
text-align: center;
line-height: 1.25;
font-family: serif;
font-size: 2.444444444em;
font-style: italic;
width: auto;/* added */
/* margin:0 auto 0 auto; removed in favour of the flex as was not working with % widths */
max-width:70%; /* added to leave room for the quotes. A calc would be good but was not allowed */
}
.big-quote blockquote::before,.big-quote blockquote::after {
position: absolute;
line-height: 1;
font-size: 5em;
color: #adadad;
padding: 0;
margin: 0;
}
.big-quote blockquote::before {
content: "\201C";
top: 0;
left: -0.1em;
}
.big-quote blockquote::after {
content: "\201D";
right: 0.1em;
bottom: -0.5em;
}
/* This is just a reminder to do something for smaller devices as the big font sizes don't fit in */
@media (max-width: 500px) {
.big-quote blockquote {
font-size:1em;
}
}
<div class="big-quote">
<blockquote>This is a styled quote.</blockquote>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。