Question

我遇到样式引号时遇到问题。所以我要做的是将引号相对于文本向下拉一点，以便它排成一行。我玩相对和绝对定位，但无法弄清楚。该程序将成为一个随机引用生成器，并且结束引用的位置必须使得它相对于文本以相同的方式排列，如果它有一个占用多行的引用。

body {
  background-color: rgb(44, 62, 80);
}
.quoteMachine {
  margin: 100px auto 0 auto;
  padding: 40px 60px;
  max-width: 600px;
  min-height: 225px;
  border-radius: 5px;
  background-color: white;
}
.theQuote {
  text-align: center;
  font-size: 30px;
  color: rgb(44, 62, 80);
}
.quotetationMarks {
  font-size: 60px;
  font-weight: 600;
}
.quoteAuthor {
  text-align: right;
  font-size: 20px;
  color: rgb(44, 62, 80);
}
.twitterButton {}

<div class="quoteMachine">
  <div class="theQuote">
    <blockquote><span class="quotetationMarks">&ldquo;</span > They call me Mister Tiibs <span class="quotetationMarks">&rdquo;<span></blockquote>
      </div>
      <div class="quoteAuthor">
        - hello
      </div>
      <button class="twitterButton"></button>
      <button class="newQuoteButton"></button>
      
      
    </div>

Answer 1

由于span是内联元素，因此您可以将vertical-align: middle;添加到.quotetationMarks，然后将其向下移动到字符串其余部分的中间位置。

或者，如果您需要更精确的控制，可以添加position: relative; top: 10px;。

Answer 2

也许将vertical-align: sub;添加到.quotetationMarks就是您要找的？

你也可以使用fontawesome，这总是一个不错的选择。 - ＆GT; http://fontawesome.io/icon/quote-right/

Answer 3

修改：虽然vertical-align: middle;是一种非常有效且优雅的方法，但有时候您的引号会有一个非常具体的位置。如果您需要将模型与像素完美匹配，这种方法可以为您提供灵活性。

你可能会使用伪元素来渲染引号，以及相对/绝对定位以获得它们“只是这样”。

这对于帮助他们跨越换行符进行定位尤为重要。（我编辑了我的例子以强制换行，以说明这种方法的稳健性。）

来自MDN：

就像伪类一样，伪元素被添加到选择器中，但它们不是描述特殊状态，而是允许您设置文档的某些部分的样式。例如，:: first-line伪元素仅定位选择器指定的元素的第一行。

特别针对::before pseudo element：

::之前创建一个伪元素，它是匹配元素的第一个子元素。它通常用于通过使用content属性向元素添加化妆品内容。默认情况下，此元素是内联的。

这些引用你的造型是化妆品内容，所以我认为这是::before伪元素的一个很好的用例。

我在这里分发了您的代码：http://codepen.io/cam5/pen/kkxpbX，但这里是相关部分

<!-- quote HTML -->
<blockquote>
    <span class="quotationMark quotationMark--left"></span > 
        They call me&hellip;<br /> Mister Tiibs 
    <span class="quotationMark quotationMark--right"></span >
</blockquote>

和CSS：

/* quote css */
.quotationMark {
  position: relative;
}

.quotationMark--left::before,
.quotationMark--right::before {
  font-size: 60px;
  font-weight: 600;
  position: absolute;
  top: -15px;
}

.quotationMark--left::before { 
  content:"\201C"; 
  left: -45px;

}
.quotationMark--right::before { 
  content:"\201D"; 
  right: -45px;
}

当您尝试找到ISO以将某个字形放入CSS content规则时，此CSS Tricks资源非常有用：https://css-tricks.com/snippets/html/glyphs/

设置父元素，.quotationMark到display: relative;意味着传递给孩子的top，right，left值（伪带有position: absolute;属性的元素）计算 relative 到它们的父元素。

样式引号

3 个答案: