样式化引号答案

【问题标题】：Styling quotation marks样式化引号
【发布时间】：2016-10-04 21:18:24
【问题描述】：

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

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>

【问题讨论】：

旁注：拼写：'quotetationMarks'
您只需要.quotetationMarks 的 CSS 选择器（示例中的引号） - 然后您可以设置它的 position: relative 并使用 top 或 @987654326 向上/向下移动它@ 位置值。另外，请参阅@Utkanos 关于拼写的建议
太棒了！这行得通，唯一的事情是我不完全明白为什么。为什么引号是相对于引号而不是 div 的顶部？。

标签： html css quotation-marks

【解决方案1】：

由于spans 是内联元素，您可以将vertical-align: middle; 添加到.quotetationMarks，这会将它们向下移动到字符串其余部分的中间。

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

【讨论】：

好建议！ :)
这正是我所做的 :) 效果很好。我唯一不明白的是为什么在设置相对位置时引号是相对于引号而不是 div。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

您可能会从使用伪元素来呈现引号以及相对/绝对定位以使它们“恰如其分”。

这对于帮助它们跨换行定位尤其重要。（我已经编辑了我的示例以强制换行，以说明这种方法的稳健性。）

来自MDN：

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

特别是::before pseudo element：

::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;
}

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

设置父元素，将.quotationMark 设置为display: relative; 将意味着top、right、left 值传递给带有position: absolute; 属性的子元素（伪元素） 相对于与其父级计算。

【讨论】：