引号的样式设计

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>

- manuel

---

附注：拼写为“引号” - Mitya

你只需要针对 .quotetationMarks（你示例中的引号）编写一个 CSS 选择器 - 然后你可以设置它的 position: relative 并使用 top 或 bottom 位置值将其上下移动。另外，请参考 @Utkanos 的关于拼写的建议。 - Geoff James

太好了！它可以工作，唯一的问题是我不完全明白为什么。为什么引号与引语相关而不是与div顶部相关呢？ - manuel

Answer 1

由于span是内联元素，您可以为.quotetationMarks添加vertical-align: middle;，这将使其朝下移动到其余字符串的中间位置。

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

- CodingWithSpike

---

很好的建议！ :) - Geoff James

这正是我所做的 :) 运行得很好。唯一让我困惑的是，当设置相对位置时，为什么引号与引用相关，而不是与 div 相关。 - manuel

Answer 2

也许在.quotetationMarks中添加vertical-align: sub;是您要找的内容吗？

您还可以使用fontawesome，这始终是一个不错的选择。-> http://fontawesome.io/icon/quote-right/

- Carlos27

Answer 3

编辑：虽然vertical-align: middle;是一种非常有效和优雅的方法，但有时你会对引号有特定的位置需求。如果你需要像素完美地匹配模型，这种方法为您提供了灵活性。

---

您可以使用伪元素来渲染引号，并使用相对/绝对定位使它们“恰到好处”。

这对于帮助定位跨越换行很重要。（我已经编辑了我的示例以强制换行，以说明此方法的健壮性。）

来自MDN：

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

特别是针对 ::before 伪元素：

::before创建一个伪元素，它是匹配元素的第一个子元素。它经常用于通过使用content属性向元素添加装饰性内容。此元素默认为内联元素。

您正在样式化的这些引号是装饰性内容，因此我认为这是::before伪元素的一个很好的用例。

我在这里分叉了您的codepen：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;
}

这个CSS Tricks资源非常棒，特别是当你想将某个字形放入CSS的content规则中时。只需转到以下链接：https://css-tricks.com/snippets/html/glyphs/ 将父元素.quotationMark设置为display：relative;意味着它带有position：absolute;属性的子元素(伪元素)的top、right和left值相对于其父元素进行计算。

- Cameron Hurd