Styling quotation marks

Question

I have run into and issue when styling quotes. So what I'm trying to do is pull the quotation marks down a bit relative to the text so that it lines up well. I played around with relative and absolute positioning but could not figure it out. This program will become a random quote generator and the position of the end quote has to be such that it lines up the same way relative to the text if it there is a quote that takes up several lines.

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

Since the spans are inline elements, you could add vertical-align: middle; to .quotetationMarks and that would move them down toward the middle of the rest of the string.

Alternatively, you could add position: relative; top: 10px; if you need more precise control.

Answer 2

Maybe adding vertical-align: sub; to .quotetationMarks is what you are looking for?

You can also use fontawesome, that's always a good option. -> http://fontawesome.io/icon/quote-right/