html - 样式引号

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; 如果你需要更精确的控制。