Question

我试图在任何时候垂直对齐中间的伪元素开放引用。缩小尺寸时，它会对齐，但默认情况下它高于我的引用。有没有办法让我可以在中间垂直对齐它？

CSS

blockquote {
    margin: 3em;
    padding: 0 3em;
    position: relative;
}

blockquote::before {
    content: open-quote;
    left: -40px;
}


blockquote::before, blockquote::after {
    top: 50%;
    color: #F1722E;
    font-size: 124px;
    position: absolute;
    transform: translateY(-50%);
}

HTML

<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus iure rem repudiandae incidunt corporis obcaecati voluptate officia. Facere laborum ipsam molestiae dolorum libero nesciunt ducimus aliquid voluptatibus. Ad praesentium fugiat.</blockquote>

http://jsfiddle.net/gfybkpc9/

Answer 1

您可以通过调整公开报价的上边距来实现。见this fiddle

我像这样调整了CSS：

blockquote {
    margin: 3em;
    padding: 0 3em;
    position: relative;
}

blockquote::before {
    content:'"';
    left: -40px;
}


blockquote::before, blockquote::after {
    top: 50%;
    color: #F1722E;
    font-size: 124px;
    position: absolute;
    margin-top:-48px;
}

基本上，边距顶部将是元素高度的一半，这将使元素的中间位置为top属性的50％。由于它是一个引号，我们必须稍微捏一下数字。

无法将引号与中间对齐

1 个答案: