样式引号

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，这总是一个不错的选择。 -> http://fontawesome.io/icon/quote-right/

Answer 3

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

您可能会从使用 伪元素 来呈现引号，并使用 relative/absolute 定位来获取它们 "just so".

这对于帮助将它们放置在换行符中尤为重要。（为了说明这种方法的稳健性，我编辑了示例以强制换行。）

来自MDN：

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

并且专门针对 ::before pseudo element:

::before creates a pseudo-element that is the first child of the element matched. It is often used to add cosmetic content to an element by using the content property. This element is inline by default.

您设计的这些引用是修饰内容，因此我认为这是 ::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:"1C"; 
  left: -45px;

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

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

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

样式引号

Styling quotation marks

html

css

quotation-marks